update

src/core/components/DataTable/index.js

@@ -1,19 +1,119 @@
 import { useMaterialReactTable } from "material-react-table";
-import DataTable_Paper from "./table/Paper";
+import DataTable_Main from "./Main";
+import { FA_DATATABLE_LOCALIZATION } from "./localization/fa/datatable";
+import CustomToolbar from "@/components/CustomToolbar";
+import useTableSetting from "@/lib/hooks/useTableSetting";
 
-const isTableInstanceProp = (props) => props.table !== undefined;
+const data = [
+  {
+    name: {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+    address: '261 Erdman Ford',
+    city: 'East Daphne',
+    state: 'Kentucky',
+  },
+  {
+    name: {
+      firstName: 'Jane',
+      lastName: 'Doe',
+    },
+    address: '769 Dominic Grove',
+    city: 'Columbus',
+    state: 'Ohio',
+  },
+  {
+    name: {
+      firstName: 'Joe',
+      lastName: 'Doe',
+    },
+    address: '566 Brakus Inlet',
+    city: 'South Linda',
+    state: 'West Virginia',
+  },
+  {
+    name: {
+      firstName: 'Kevin',
+      lastName: 'Vandy',
+    },
+    address: '722 Emie Stream',
+    city: 'Lincoln',
+    state: 'Nebraska',
+  },
+  {
+    name: {
+      firstName: 'Joshua',
+      lastName: 'Rolluffs',
+    },
+    address: '32188 Larkin Turnpike',
+    city: 'Charleston',
+    state: 'South Carolina',
+  },
+];
 
 const DataTable = (props) => {
-  let table;
+  const { userId, pageName, tableName, columns, initialStateProps } = props
+  const { settingStore, hideAction, sortAction } = useTableSetting();
 
-  if (isTableInstanceProp(props)) {
-    table = props.table;
-  } else {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    table = useMaterialReactTable(props);
+  const onColumnVisibilityChange = (event) => {
+    const settingValue = event();
+    hideAction(userId, pageName, tableName, settingValue, columns);
+  };
+  const onSortingChange = (event) => {
+    const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []);
+    sortAction(userId, pageName, tableName, settingValue, columns);
   }
 
-  return <DataTable_Paper table={table} />;
+  const table = useMaterialReactTable({
+    localization: FA_DATATABLE_LOCALIZATION,
+    columns,
+    data: data,
+    manualSorting: true,
+    renderTopToolbarCustomActions: ({ table }) => (<>
+      <CustomToolbar
+        columns={columns}
+      />
+    </>),
+    initialState: {
+      density: 'compact',
+      columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
+      sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [],
+      ...initialStateProps
+    },
+    state: {
+      columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
+      sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
+    },
+    muiTableHeadProps: {
+      sx: {
+        borderTop: "1px solid #e1e1e1",
+        borderBottom: "2px solid #e1e1e1",
+      }
+    },
+    muiTableHeadCellProps: {
+      sx: {
+        color: "primary.main",
+        borderLeft: "1px solid #e1e1e1",
+        "&:first-of-type": {
+          borderLeft: "unset"
+        }
+      },
+    },
+    muiTableBodyCellProps: {
+      sx: {
+        borderLeft: "1px solid #e1e1e1",
+        "&:first-of-type": {
+          borderLeft: "unset"
+        }
+      },
+    },
+    onColumnVisibilityChange: onColumnVisibilityChange,
+    onSortingChange: onSortingChange,
+    ...props
+  })
+
+  return <DataTable_Main table={table} />;
 };
 
 export default DataTable;