datatable reading local storage

2024-02-18 11:37:30 +03:30
parent d89e86813d
commit 0d35263ca2
6 changed files with 251 additions and 6 deletions
--- a/src/components/DataTableTest.jsx
+++ b/src/components/DataTableTest.jsx
@@ -0,0 +1,166 @@
+"use client"
+import {useMemo, useState} from 'react';
+import {MaterialReactTable} from 'material-react-table';
+import useTableSetting from "@/lib/hooks/useTableSetting";
+
+
+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 TestDataTable = () => {
+    const [userId, setUserId] = useState(2);
+    const [pageName, setPageName] = useState('loan');
+    const [tableName, setTableName] = useState('loan_table');
+    const {settingStore, hideAction, filterAction, sortAction} = useTableSetting();
+
+    const columns = useMemo(
+        () => [
+            {
+                accessorKey: 'name.firstName',
+                header: 'First Name',
+                size: 150,
+                id: "firstName",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains"
+                ],
+            },
+            {
+                accessorKey: 'name.lastName',
+                header: 'Last Name',
+                size: 150,
+                id: "lastName",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains"
+                ],
+            },
+            {
+                accessorKey: 'address',
+                header: 'Address',
+                size: 200,
+                id: "address",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains"
+                ],
+            },
+            {
+                accessorKey: 'city',
+                header: 'City',
+                size: 150,
+                id: "city",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+
+            },
+            {
+                accessorKey: 'state',
+                header: 'State',
+                size: 150,
+                id: "state",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains"
+                ],
+            },
+        ],
+        [],
+    );
+    const onColumnVisibilityChange = (event) => {
+        const settingValue = event();
+        hideAction(userId, pageName, tableName, settingValue);
+    };
+    const onSortingChange = (event) => {
+        const settingValue = event();
+        sortAction(userId, pageName, tableName, settingValue);
+    }
+
+    return <MaterialReactTable columns={columns}
+                               data={data}
+                               manualSorting={true}
+                               initialState={{
+                                   columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
+                                   sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
+                               }}
+                               state={{
+                                   columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
+                                   sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
+                               }}
+                               onColumnVisibilityChange={onColumnVisibilityChange}
+                               onSortingChange={onSortingChange}
+    />;
+};
+
+export default TestDataTable;
+