Untitled
unknown
plain_text
a year ago
2.0 kB
5
Indexable
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} />; }
Editor is loading...
Leave a Comment