Styles, API calls, and more

2024-08-13 17:08:16 -05:00
parent 722d8e65ec
commit 1e57c1a19e
34 changed files with 2560 additions and 643 deletions
--- a/src/DataTable/DataTable.tsx
+++ b/src/DataTable/DataTable.tsx
@@ -0,0 +1,99 @@
+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;