99 lines
2.4 KiB
TypeScript
99 lines
2.4 KiB
TypeScript
import { ModalsProvider } from "@mantine/modals";
|
|
import { MantineReactTable, useMantineReactTable } from "mantine-react-table"
|
|
import { memo } from "react";
|
|
// import '../dataTableStyles.css';
|
|
import '@mantine/core/styles.css'; //import Mantine V7 styles needed by MRT
|
|
import '@mantine/dates/styles.css'; //if using mantine date picker features
|
|
import 'mantine-react-table/styles.css'; //import MRT styles
|
|
|
|
export function DataTableComponent({
|
|
columns,
|
|
tableData,
|
|
isFetching,
|
|
isLoading,
|
|
onCreatingRowSave,
|
|
onEditingRowSave,
|
|
}: any) {
|
|
|
|
const table = useMantineReactTable({
|
|
columns: columns,
|
|
data: tableData,
|
|
enableFacetedValues: true,
|
|
enablePagination: false,
|
|
enableRowVirtualization: true,
|
|
enableEditing: true,
|
|
createDisplayMode: "modal",
|
|
editDisplayMode: "row",
|
|
enableBottomToolbar: false,
|
|
enableToolbarInternalActions: false,
|
|
onCreatingRowSave: onCreatingRowSave,
|
|
onEditingRowSave: onEditingRowSave,
|
|
getRowId: (row: any) => row.id,
|
|
initialState: {
|
|
showProgressBars: isFetching,
|
|
showLoadingOverlay: isLoading,
|
|
isLoading: isLoading,
|
|
},
|
|
state: {
|
|
showProgressBars: isFetching,
|
|
showLoadingOverlay: isLoading,
|
|
isLoading: isLoading,
|
|
},
|
|
// mantineToolbarAlertBannerBadgeProps: {
|
|
// style: {
|
|
// color: "red",
|
|
// },
|
|
// },
|
|
// mantineTopToolbarProps: {
|
|
// style: {
|
|
// color: "var(--color-text-pri)",
|
|
// background: "var(--color-background)",
|
|
// border: "none",
|
|
// boxShadow: "none",
|
|
// },
|
|
// },
|
|
// mantineTableHeadProps: {
|
|
// style: {
|
|
// boxShadow: "none",
|
|
// },
|
|
// },
|
|
// mantineTableHeadCellProps: {
|
|
// style: {
|
|
// color: "var(--color-text-pri)",
|
|
// background: "var(--color-background)",
|
|
// borderRight: "none",
|
|
// borderLeft: "none",
|
|
// },
|
|
// },
|
|
// mantineTableBodyCellProps: {
|
|
// style: {
|
|
// background: "var(--color-background)",
|
|
// borderRight: "none",
|
|
// borderLeft: "none",
|
|
// },
|
|
// },
|
|
// mantinePaperProps: {
|
|
// style: {
|
|
// border: "none",
|
|
// boxShadow: "none",
|
|
// background: "var(--color-background)",
|
|
// },
|
|
// },
|
|
// mantineTableContainerProps: {
|
|
// style: {
|
|
// border: "none",
|
|
// boxShadow: "none",
|
|
// background: "var(--color-background)",
|
|
// },
|
|
// },
|
|
});
|
|
return (
|
|
<ModalsProvider>
|
|
<MantineReactTable table={table} />
|
|
</ModalsProvider>
|
|
);
|
|
}
|
|
|
|
export const DataTable = memo(DataTableComponent);
|
|
|
|
export default DataTable; |