diff --git a/package.json b/package.json index bf60bc4..0eab6d8 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/app/layout.js b/src/app/layout.js index 88b0280..c23a7ec 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,11 +1,17 @@ +import {TableSettingProvider} from "@/lib/contexts/tableSetting"; + export const metadata = { title: 'سامانه جامع راهداری', } export default function RootLayout({children}) { - return ( + return ( + - {children} + + {children} + - ) + + ) } diff --git a/src/app/page.js b/src/app/page.js index 7be9aa2..2534242 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,5 +1,9 @@ -const Page = () => { - return (<>) +import DataTableTest from "@/components/DataTableTest"; + +function page() { + return ( + + ); } -export default Page \ No newline at end of file +export default page; diff --git a/src/components/DataTableTest.jsx b/src/components/DataTableTest.jsx new file mode 100644 index 0000000..e8d655d --- /dev/null +++ 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 ; +}; + +export default TestDataTable; + diff --git a/src/lib/contexts/tableSetting.jsx b/src/lib/contexts/tableSetting.jsx new file mode 100644 index 0000000..520bff5 --- /dev/null +++ b/src/lib/contexts/tableSetting.jsx @@ -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 ( + + {children} + + ); +}; \ No newline at end of file diff --git a/src/lib/hooks/useTableSetting.jsx b/src/lib/hooks/useTableSetting.jsx new file mode 100644 index 0000000..cc7aaa7 --- /dev/null +++ b/src/lib/hooks/useTableSetting.jsx @@ -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;