118 lines
3.4 KiB
TypeScript
118 lines
3.4 KiB
TypeScript
import {
|
|
MRT_ColumnDef,
|
|
type MRT_Cell,
|
|
type MRT_Row,
|
|
type MRT_TableInstance,
|
|
MRT_TableState,
|
|
MantineReactTable,
|
|
useMantineReactTable,
|
|
} from "mantine-react-table";
|
|
import { type OnChangeFn, type RowSelectionState } from "@tanstack/table-core";
|
|
import { Text } from "@mantine/core";
|
|
|
|
export type RowActionsProps<T extends object> = (props: {
|
|
cell: MRT_Cell<T>;
|
|
row: MRT_Row<T>;
|
|
table: MRT_TableInstance<T>;
|
|
}) => React.ReactNode;
|
|
|
|
export type DetailPanelProps<T extends object> = (props: {
|
|
row: MRT_Row<T>;
|
|
table: MRT_TableInstance<T>;
|
|
}) => React.ReactNode;
|
|
|
|
export type TopToolbarCustomActionsProps<T extends object> = (props: {
|
|
table: MRT_TableInstance<T>;
|
|
}) => React.ReactNode;
|
|
|
|
interface Props<T extends object> {
|
|
columns: MRT_ColumnDef<T>[];
|
|
data: T[];
|
|
renderRowActions?: RowActionsProps<T> | undefined;
|
|
renderDetailPanel?: DetailPanelProps<T> | undefined;
|
|
renderTopToolbarCustomActions?: TopToolbarCustomActionsProps<T> | undefined;
|
|
state?: Partial<MRT_TableState<T>> | undefined;
|
|
enableRowSelection?: boolean;
|
|
onRowSelectionChange?: OnChangeFn<RowSelectionState> | undefined;
|
|
getRowId?:
|
|
| ((
|
|
originalRow: T,
|
|
index: number,
|
|
parentRow: MRT_Row<T>
|
|
) => string | undefined)
|
|
| undefined;
|
|
enablePagination?: boolean;
|
|
columnPinningColumns?: string;
|
|
enableStickyHeader?: boolean;
|
|
enableStickyFooter?: boolean;
|
|
enableGlobalFilter?: boolean;
|
|
enableColumnFilters?: boolean;
|
|
}
|
|
|
|
export default function Table<T extends object>({
|
|
columns,
|
|
data,
|
|
renderRowActions,
|
|
renderDetailPanel,
|
|
renderTopToolbarCustomActions,
|
|
state,
|
|
enableRowSelection = false,
|
|
onRowSelectionChange,
|
|
getRowId,
|
|
enablePagination = true,
|
|
columnPinningColumns = "",
|
|
enableStickyHeader = false,
|
|
enableStickyFooter = false,
|
|
enableGlobalFilter = true,
|
|
enableColumnFilters = true,
|
|
}: Props<T>) {
|
|
const table = useMantineReactTable({
|
|
columns,
|
|
data,
|
|
columnFilterDisplayMode: "popover",
|
|
enableRowActions: renderRowActions ? true : false,
|
|
enableExpanding: renderDetailPanel ? true : false,
|
|
enablePinning: true,
|
|
positionActionsColumn: "last",
|
|
renderRowActions,
|
|
renderDetailPanel,
|
|
renderTopToolbarCustomActions,
|
|
enableRowSelection,
|
|
onRowSelectionChange,
|
|
getRowId,
|
|
enableStickyHeader: enableStickyHeader,
|
|
enableStickyFooter: enableStickyFooter,
|
|
enableGlobalFilter: enableGlobalFilter,
|
|
enableColumnFilters: enableColumnFilters,
|
|
mantinePaperProps: {
|
|
shadow: "none",
|
|
withBorder: false,
|
|
},
|
|
initialState: {
|
|
columnPinning: {
|
|
right: ["mrt-row-actions"],
|
|
left: [columnPinningColumns],
|
|
},
|
|
columnVisibility: {
|
|
// assigned_to: false,
|
|
},
|
|
density: "xs",
|
|
},
|
|
state: {
|
|
...state,
|
|
},
|
|
// enableRowNumbers: true,
|
|
enableGlobalFilterRankedResults: true,
|
|
rowNumberMode: "original",
|
|
paginationDisplayMode: "pages",
|
|
enablePagination: enablePagination,
|
|
renderEmptyRowsFallback: ({ table }) => (
|
|
<Text color="dimmed" align="center" my={"sm"}>
|
|
No records to display
|
|
</Text>
|
|
),
|
|
});
|
|
|
|
return <MantineReactTable table={table} />;
|
|
}
|