custom notification and duplicate index of datatable to main and start making context for table filtering

src/core/components/DataTable/Main.js

@@ -1,19 +1,149 @@
-import {useMaterialReactTable} from "material-react-table";
 import DataTable_Paper from "./table/Paper";
+import {useMaterialReactTable} from "material-react-table";
+import {FA_DATATABLE_LOCALIZATION} from "./localization/fa/datatable";
+import useTableSetting from "@/lib/hooks/useTableSetting";
+import {flattenArrayOfObjects} from "@/core/utils/flattenArrayOfObjects";
+import Toolbar from "@/components/home/Toolbar";
 
-const isTableInstanceProp = (props) => props.table !== undefined;
+const data = [
+    {
+        name: {
+            firstName: 'امین',
+            lastName: 'قاسمپور',
+        },
+        address: 'فلان جا',
+        city: 'تهران',
+        state: 'بررسی شده',
+        price: '20',
+        updated_at: '2024/05/02',
+        company: 'همراه اول',
+        area: 'منطقه 5',
+    },
+    {
+        name: {
+            firstName: 'امیر حسین',
+            lastName: 'محمودی',
+        },
+        address: 'فلان جا',
+        city: 'تهران',
+        state: 'تکمیل شده',
+        price: '27',
+        updated_at: '2024/05/02',
+        company: 'وایتل',
+        area: 'منطقه 27',
+    },
+    {
+        name: {
+            firstName: 'یاسمن',
+            lastName: 'علی اکبری',
+        },
+        address: 'فلان جا',
+        city: 'شیراز',
+        state: 'بررسی شده',
+        price: '32',
+        updated_at: '2024/05/02',
+        company: 'ایرانسل',
+        area: 'منطقه 23',
+    },
+    {
+        name: {
+            firstName: 'حمیدرضا',
+            lastName: 'رنجبرپور',
+        },
+        address: 'فلان جا',
+        city: 'اصفهان',
+        state: 'بررسی شده',
+        price: '45',
+        updated_at: '2024/05/02',
+        company: 'ایرانول',
+        area: 'منطقه 21',
+    },
+    {
+        name: {
+            firstName: 'محمد',
+            lastName: 'جلالی',
+        },
+        address: 'فلان جا',
+        city: 'رشت',
+        state: 'درحال بررسی',
+        price: '8',
+        updated_at: '2024/05/02',
+        company: 'فیلیمو',
+        area: 'منطقه 8',
+    },
+];
 
 const DataTable_Main = (props) => {
-    let table;
+    const {userId, pageName, tableName, columns, initialStateProps} = props
 
-    if (isTableInstanceProp(props)) {
-        table = props.table;
-    } else {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        table = useMaterialReactTable(props);
+    const flatColumns = flattenArrayOfObjects(columns, 'columns')
+    const {settingStore, hideAction, sortAction} = useTableSetting();
+
+    const onColumnVisibilityChange = (event) => {
+        const settingValue = event();
+        hideAction(userId, pageName, tableName, settingValue, flatColumns);
+    };
+    const onSortingChange = (event) => {
+        const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []);
+        sortAction(userId, pageName, tableName, settingValue, flatColumns);
     }
 
-    return <DataTable_Paper table={table} columns={props.columns}/>;
+    const table = useMaterialReactTable({
+        localization: FA_DATATABLE_LOCALIZATION,
+        columns,
+        data: data,
+        // manualSorting: true,
+        renderTopToolbarCustomActions: ({table}) => (<>
+            <Toolbar
+                columns={flatColumns}
+            />
+        </>),
+        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"
+                }
+            },
+        },
+        manualFiltering: true,
+        manualPagination: true,
+        manualSorting: true,
+        onColumnVisibilityChange: onColumnVisibilityChange,
+        onSortingChange: onSortingChange,
+        ...props
+    })
+
+    return <DataTable_Paper table={table} columns={flatColumns} userid={userId} pagename={pageName}
+                            tablename={tableName}/>;
 };
 
 export default DataTable_Main;
+
+
+