Untitled

import React, { useMemo } from "react";
import { ActionIcon, Box } from "@mantine/core";
import { IconEdit, IconTrash } from "@tabler/icons-react";
import { useRouter } from "next/navigation";

import {
  MantineReactTable,
  useMantineReactTable,
  MRT_ColumnDef,
  MRT_RowActionsRenderer,
  MRT_PaginationState
} from "mantine-react-table";

interface Column<T> {
  accessorFn: (originalRow: T) => any;
  id: string;
  header: string;
  Header: React.ReactElement;
}

interface IPagination {
  pageIndex: number;
  pageSize: number;
}

interface CustomTableProps<T> {
  columns: Column<T>[];
  data: T[];
  pagination: IPagination;
  totalDocs?: number;
  setPagination: (pagination: MRT_PaginationState) => void;
  deleteRow: (id: string) => any;
  editRow: (id: number | string) => void;
}

export default function CustomTable<T>({
  columns,
  data,
  pagination,
  setPagination,
  totalDocs,
  deleteRow,
  editRow
}: CustomTableProps<T>) {
  const router = useRouter();

  const table = useMantineReactTable({
    columns,
    data,
    rowCount: totalDocs,
    enableRowSelection: true,
    enableRowActions: true,
    positionActionsColumn: "last",
    enableColumnOrdering: true,
    enableGlobalFilter: false,
    manualPagination: true,
    onPaginationChange: setPagination,
    state: {
      pagination
    },
    renderRowActions: ({ row }) => (
      <Box sx={{ display: "flex", flexWrap: "nowrap", gap: "8px" }}>
        <ActionIcon
          color='orange'
          onClick={() => {
            router.push(editRow(row.original.id));
          }}
        >
          <IconEdit />
        </ActionIcon>
        <ActionIcon
          color='red'
          onClick={() => {
            deleteRow(row?.original?.id);
          }}
        >
          <IconTrash />
        </ActionIcon>
      </Box>
    )
  });

  return <MantineReactTable table={table} />;
}