RMS/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

datatable reading local storage

Browse Source
This commit is contained in:
Mohammad Jalali
2024-02-18 11:37:30 +03:30
parent d89e86813d
commit 0d35263ca2
6 changed files with 251 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -15,6 +15,7 @@
"@mui/icons-material": "^5.15.6",
"@mui/material": "^5.15.6",
"@mui/material-nextjs": "^5.15.6",
"material-react-table": "^2.11.2",
"next": "14.1.0",
"react": "^18",
"react-dom": "^18",

12
src/app/layout.js
View File

@@ -1,11 +1,17 @@
import {TableSettingProvider} from "@/lib/contexts/tableSetting";
export const metadata = {
title: 'سامانه جامع راهداری',
}
export default function RootLayout({children}) {
return (<html lang="fa" dir={'rtl'}>
return (
<html lang="fa" dir={'rtl'}>
<body style={{height: '100vh'}}>
{children}
<TableSettingProvider>
{children}
</TableSettingProvider>
</body>
</html>)
</html>
)
}

10
src/app/page.js
View File

@@ -1,5 +1,9 @@
const Page = () => {
return (<></>)
import DataTableTest from "@/components/DataTableTest";
function page() {
return (
<DataTableTest/>
);
}
export default Page
export default page;

166
src/components/DataTableTest.jsx Normal file
View File

@@ -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;

59
src/lib/contexts/tableSetting.jsx Normal file
View File

@@ -0,0 +1,59 @@
'use client'
import {createContext, useEffect, useState} from "react";
export const TableSettingContext = createContext();
export const TableSettingProvider = ({children}) => {
const [settingStore, setSettingStore] = useState({});
useEffect(() => {
const _localStorage = localStorage.getItem("_setting-app")
if (_localStorage)
setSettingStore(JSON.parse(_localStorage))
}, []);
const hideAction = (user_id, page_name, table_name, settingValue) => {
updateSettingStorage(user_id, page_name, table_name, "hides", settingValue);
}
const sortAction = (user_id, page_name, table_name, settingValue) => {
updateSettingStorage(user_id, page_name, table_name, "sorts", settingValue);
}
const filterAction = (user_id, page_name, table_name, settingValue) => {
updateSettingStorage(user_id, page_name, table_name, "filters", settingValue);
}
const updateSettingStorage = (user_id, page_name, table_name, settingType, settingValue) => {
const prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {};
const userSettings = prevLocalStorage[user_id] || {};
const pageSettings = userSettings[page_name] || {};
const tableSettings = pageSettings[table_name] || {};
let newSettings;
if (settingType === "sorts") {
newSettings = [...settingValue];
} else {
newSettings = {...tableSettings[settingType] || {}, ...settingValue};
}
const updatedLocalStorage = {
...prevLocalStorage,
[user_id]: {
...userSettings,
[page_name]: {
...pageSettings,
[table_name]: {
...tableSettings,
[settingType]: Array.isArray(settingValue) ? [...newSettings] : {...newSettings},
},
},
},
};
localStorage.setItem("_setting-app", JSON.stringify(updatedLocalStorage));
setSettingStore(updatedLocalStorage);
}
return (
<TableSettingContext.Provider
value={{settingStore, hideAction, sortAction, filterAction}}>
{children}
</TableSettingContext.Provider>
);
};

9
src/lib/hooks/useTableSetting.jsx Normal file
View File

@@ -0,0 +1,9 @@
import {useContext} from "react";
import {TableSettingContext} from "../contexts/tableSetting";
const useUser = () => {
const {settingStore, hideAction, sortAction, filterAction} = useContext(TableSettingContext);
return {settingStore, hideAction, sortAction, filterAction};
};
export default useUser;