diff --git a/src/app/page.js b/src/app/page.js index ed41c91..9d660d7 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,148 +1,8 @@ 'use client' -import DataTable from "@/core/components/DataTable"; -import { useMemo } from "react"; +import HomeComponent from "@/components/home"; function Page() { - const columns = useMemo( - () => [ - { - accessorKey: 'fullname', - header: 'نام کامل', - id: "fullname", - columns: [ - { - accessorKey: 'name.firstName', - header: 'نام', - id: "firstName", - enableColumnFilter: true, - datatype: "text", - filterFn: "contains", - enableClickToCopy: true, - columnFilterModeOptions: [ - "equals", - "notEquals", - "contains" - ], - }, - { - accessorKey: 'name.lastName', - header: 'نام خانوادگی', - id: "lastName", - enableColumnFilter: true, - datatype: "text", - filterFn: "contains", - columnFilterModeOptions: [ - "equals", - "notEquals", - "contains" - ], - }, - ], - enableColumnFilter: true, - datatype: "text", - filterFn: "contains", - columnFilterModeOptions: [ - "equals", - "notEquals", - "contains" - ], - }, - { - accessorKey: 'address', - header: 'آدرس', - id: "address", - enableColumnFilter: true, - datatype: "text", - filterFn: "contains", - columnFilterModeOptions: [ - "equals", - "notEquals", - "contains" - ], - }, - { - accessorKey: 'city', - header: 'شهر', - id: "city", - enableColumnFilter: true, - datatype: "text", - filterFn: "contains", - columnFilterModeOptions: [ - "equals", - "notEquals", - "contains", - "lessThan", - "greaterThan", - "between", - ], - - }, - { - accessorKey: 'state', - header: 'وضعیت', - id: "state", - text: 'نام', - enableColumnFilter: true, - datatype: "text", - filterFn: "contains", - columnFilterModeOptions: [ - "equals", - "notEquals", - "contains" - ], - }, - { - accessorKey: 'state', - header: 'محدوده', - id: "betweenNum", - text: 'محدوده', - enableColumnFilter: true, - datatype: "text", - filterFn: "betweenNum", - columnFilterModeOptions: [], - }, - { - accessorKey: 'state', - header: 'تاریخ', - id: "betweenDate", - text: 'تاریخ', - enableColumnFilter: true, - datatype: "text", - filterFn: "betweenDate", - columnFilterModeOptions: [], - }, - { - accessorKey: 'state', - header: 'شلکت', - id: "select2", - text: 'تاریخ', - type: 'select2', - enableColumnFilter: true, - datatype: "text", - filterFn: "equals", - columnFilterModeOptions: [], - }, - { - accessorKey: 'state', - header: 'سلکت', - id: "select", - text: 'تنتنت', - type: 'select', - enableColumnFilter: true, - datatype: "text", - filterFn: "equals", - columnFilterModeOptions: [], - }, - ], - [], - ); - - return ( - <> - - - - ); + return ; } export default Page; diff --git a/src/components/CustomToolbar.jsx b/src/components/CustomToolbar.jsx deleted file mode 100644 index 344b5da..0000000 --- a/src/components/CustomToolbar.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import FilterColumn from "@/components/FilterColumn"; - -const CustomToolbar = ({columns}) => { - return ( - - ) -} -export default CustomToolbar - - - - - - - - - - - - diff --git a/src/components/DataTableTest.jsx b/src/components/DataTableTest.jsx deleted file mode 100644 index bf610fb..0000000 --- a/src/components/DataTableTest.jsx +++ /dev/null @@ -1,104 +0,0 @@ -"use client" -import {useMemo, useState} from 'react'; -import {MaterialReactTable} from 'material-react-table'; -import useTableSetting from "@/lib/hooks/useTableSetting"; -import {IconButton, Tooltip, Typography} from "@mui/material"; -import CustomToolbar from "@/components/CustomToolbar"; - - -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', - }, -]; - -function RefreshIcon() { - return null; -} - -const TestDataTable = ({columns}) => { - const [userId, setUserId] = useState(2); - const [pageName, setPageName] = useState('loan'); - const [tableName, setTableName] = useState('loan_table'); - const {settingStore, hideAction, filterAction, sortAction,} = useTableSetting(); - - 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 ( - <> - {settingStore?.[userId]?.[pageName]?.[tableName]?.['summary']} - (<> - - )} - 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; - diff --git a/src/components/MapTest.jsx b/src/components/MapTest.jsx deleted file mode 100644 index 8ccea0a..0000000 --- a/src/components/MapTest.jsx +++ /dev/null @@ -1,41 +0,0 @@ -"use client" -import {Typography} from "@mui/material"; - -const data = [ - { - id : "hello", - Subitems : [ - {id : "amin",firstName : "amin", lastName:"ali",Subitems : [{id : "shahrokh",shahrokh : "shahrokh"}], hasSubitems : true, showSubitems : false}, - {id : "amir",firstName : "amir", lastName:"akbar", hasSubitems : false, showSubitems : false}, - ], - hasSubitems : true, - showSubitems : false - }, - { - id : "hi", - Subitems : [ - {id : "ali",firstName : "ali", lastName:"ali", hasSubitems : false, showSubitems : false}, - {id : "akbar",firstName : "akbar", lastName:"akbar", hasSubitems : false, showSubitems : false}, - ], - hasSubitems : true, - showSubitems : false - } -] -const MapTest = () => { - const Amin = data.map((item) => { - return item.hasSubitems ? {...item, Subitems: item.Subitems.map((subitem) => true ? { - ...subitem, showSubitems: !item.showSubitems - } : subitem)} : item - }) - - - console.log(Amin) - - - return ( - <> - hello - - ) -} -export default MapTest \ No newline at end of file diff --git a/src/components/home/Toolbar.jsx b/src/components/home/Toolbar.jsx new file mode 100644 index 0000000..437f6ee --- /dev/null +++ b/src/components/home/Toolbar.jsx @@ -0,0 +1,20 @@ +import {Button} from "@mui/material"; + +const Toolbar = ({columns}) => { + return ( + + ) +} +export default Toolbar + + + + + + + + + + + + diff --git a/src/components/DataTableMain.jsx b/src/components/home/index.jsx similarity index 64% rename from src/components/DataTableMain.jsx rename to src/components/home/index.jsx index a6e8c91..b059e6a 100644 --- a/src/components/DataTableMain.jsx +++ b/src/components/home/index.jsx @@ -1,30 +1,43 @@ -import DataTableTest from "@/components/DataTableTest"; -import FilterColumn from "@/components/FilterColumn"; +'use client' +import DataTable from "@/core/components/DataTable"; import {useMemo} from "react"; -import {Button} from "@mui/material"; -function DataTableMain() { +function HomeComponent() { const columns = useMemo( () => [ { - accessorKey: 'name.firstName', - header: 'نام', - size: 150, - id: "firstName", - enableColumnFilter: true, - datatype: "text", - filterFn: "contains", - columnFilterModeOptions: [ - "equals", - "notEquals", - "contains" + accessorKey: 'fullname', + header: 'نام کامل', + id: "fullname", + columns: [ + { + accessorKey: 'name.firstName', + header: 'نام', + id: "firstName", + enableColumnFilter: true, + datatype: "text", + filterFn: "contains", + enableClickToCopy: true, + columnFilterModeOptions: [ + "equals", + "notEquals", + "contains" + ], + }, + { + accessorKey: 'name.lastName', + header: 'نام خانوادگی', + id: "lastName", + enableColumnFilter: true, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: [ + "equals", + "notEquals", + "contains" + ], + }, ], - }, - { - accessorKey: 'name.lastName', - header: 'نام خانوادگی', - size: 150, - id: "lastName", enableColumnFilter: true, datatype: "text", filterFn: "contains", @@ -37,7 +50,6 @@ function DataTableMain() { { accessorKey: 'address', header: 'آدرس', - size: 200, id: "address", enableColumnFilter: true, datatype: "text", @@ -51,7 +63,6 @@ function DataTableMain() { { accessorKey: 'city', header: 'شهر', - size: 150, id: "city", enableColumnFilter: true, datatype: "text", @@ -69,9 +80,8 @@ function DataTableMain() { { accessorKey: 'state', header: 'وضعیت', - size: 150, id: "state", - text:'نام', + text: 'نام', enableColumnFilter: true, datatype: "text", filterFn: "contains", @@ -84,9 +94,8 @@ function DataTableMain() { { accessorKey: 'state', header: 'محدوده', - size: 150, id: "betweenNum", - text:'محدوده', + text: 'محدوده', enableColumnFilter: true, datatype: "text", filterFn: "betweenNum", @@ -95,9 +104,8 @@ function DataTableMain() { { accessorKey: 'state', header: 'تاریخ', - size: 150, id: "betweenDate", - text:'تاریخ', + text: 'تاریخ', enableColumnFilter: true, datatype: "text", filterFn: "betweenDate", @@ -106,9 +114,8 @@ function DataTableMain() { { accessorKey: 'state', header: 'شلکت', - size: 150, id: "select2", - text:'تاریخ', + text: 'تاریخ', type: 'select2', enableColumnFilter: true, datatype: "text", @@ -118,9 +125,8 @@ function DataTableMain() { { accessorKey: 'state', header: 'سلکت', - size: 150, id: "select", - text:'تنتنت', + text: 'تنتنت', type: 'select', enableColumnFilter: true, datatype: "text", @@ -130,12 +136,13 @@ function DataTableMain() { ], [], ); + return ( <> - + ); } -export default DataTableMain; +export default HomeComponent; diff --git a/src/core/components/DataTable/Main.js b/src/core/components/DataTable/Main.js index 4a38956..d6efd7a 100644 --- a/src/core/components/DataTable/Main.js +++ b/src/core/components/DataTable/Main.js @@ -1,4 +1,4 @@ -import { useMaterialReactTable } from "material-react-table"; +import {useMaterialReactTable} from "material-react-table"; import DataTable_Paper from "./table/Paper"; const isTableInstanceProp = (props) => props.table !== undefined; @@ -13,7 +13,7 @@ const DataTable_Main = (props) => { table = useMaterialReactTable(props); } - return ; + return ; }; export default DataTable_Main; diff --git a/src/components/BetweenNumberFilter.jsx b/src/core/components/DataTable/filter/BetweenNumberFilter.jsx similarity index 100% rename from src/components/BetweenNumberFilter.jsx rename to src/core/components/DataTable/filter/BetweenNumberFilter.jsx diff --git a/src/components/BetweenDateFilter.jsx b/src/core/components/DataTable/filter/DatePicker/BetweenDateFilter.jsx similarity index 56% rename from src/components/BetweenDateFilter.jsx rename to src/core/components/DataTable/filter/DatePicker/BetweenDateFilter.jsx index e8e8c18..0e4a325 100644 --- a/src/components/BetweenDateFilter.jsx +++ b/src/core/components/DataTable/filter/DatePicker/BetweenDateFilter.jsx @@ -1,8 +1,8 @@ import {Grid} from '@mui/material'; -import MuiDatePicker from "@/components/MuiDatePicker"; +import MuiDatePicker from "@/core/components/DataTable/filter/DatePicker/MuiDatePicker"; import {useEffect, useState} from "react"; -const BetWeenDateFilter = ({formik, id , defaultValue}) => { +const BetWeenDateFilter = ({formik, id, defaultValue}) => { useEffect(() => { formik.setFieldValue(`${id}[0]`, defaultValue?.[0] || ''); formik.setFieldValue(`${id}[1]`, defaultValue?.[1] || ''); @@ -19,10 +19,14 @@ const BetWeenDateFilter = ({formik, id , defaultValue}) => { return ( - handleDateChange(0, value)}/> + handleDateChange(0, value)}/> - - handleDateChange(1, value)}/> + + handleDateChange(1, value)}/> ); diff --git a/src/components/MuiDatePicker.jsx b/src/core/components/DataTable/filter/DatePicker/MuiDatePicker.jsx similarity index 100% rename from src/components/MuiDatePicker.jsx rename to src/core/components/DataTable/filter/DatePicker/MuiDatePicker.jsx diff --git a/src/components/FilterColumn.jsx b/src/core/components/DataTable/filter/FilterColumn.jsx similarity index 75% rename from src/components/FilterColumn.jsx rename to src/core/components/DataTable/filter/FilterColumn.jsx index 08e42c0..1daa295 100644 --- a/src/components/FilterColumn.jsx +++ b/src/core/components/DataTable/filter/FilterColumn.jsx @@ -1,21 +1,17 @@ "use client" -import { - Box, - Button, Divider, Drawer, - FormControl, IconButton, styled, Typography -} from '@mui/material'; +import {Box, Button, Divider, Drawer, FormControl, IconButton, styled, Tooltip, Typography} from '@mui/material'; import {useFormik} from 'formik'; -import TextFieldWithFnBox from "@/components/TextFieldWithFnBox"; +import TextFieldWithFnBox from "@/core/components/DataTable/filter/TextFieldWithFnBox/TextFieldWithFnBox"; import {useEffect, useState} from "react"; import useTableSetting from "@/lib/hooks/useTableSetting"; -import BetweenNumberFilter from "@/components/BetweenNumberFilter"; -import BetWeenDateFilter from "@/components/BetweenDateFilter"; -import SelectBoxMultiple from "@/components/SelectBoxMultiple"; -import SelectBox from "@/components/SelectBox"; +import BetweenNumberFilter from "@/core/components/DataTable/filter/BetweenNumberFilter"; +import BetWeenDateFilter from "@/core/components/DataTable/filter/DatePicker/BetweenDateFilter"; +import SelectBoxMultiple from "@/core/components/DataTable/filter/SelectBoxMultiple"; +import SelectBox from "@/core/components/DataTable/filter/SelectBox"; +import FilterAltIcon from '@mui/icons-material/FilterAlt'; import CloseIcon from '@mui/icons-material/Close'; -import { useTheme } from '@mui/material/styles'; -function FilterColumn({ columns }) { +function FilterColumn({columns}) { const [open, setOpen] = useState(false); const [selectedFilters, setSelectedFilters] = useState([]); const [userId, setUserId] = useState(2); @@ -23,7 +19,7 @@ function FilterColumn({ columns }) { const [tableName, setTableName] = useState('loan_table'); const {settingStore, hideAction, filterAction, sortAction,} = useTableSetting(); - const DrawerHeader = styled('div')(({ theme }) => ({ + const DrawerHeader = styled('div')(({theme}) => ({ display: 'flex', alignItems: 'center', padding: theme.spacing(0, 1), @@ -48,7 +44,7 @@ function FilterColumn({ columns }) { updatedFilters[filterIndex].fn = filterFn; setSelectedFilters(updatedFilters); } else { - const newFilter = { id: fieldName, fn: filterFn }; + const newFilter = {id: fieldName, fn: filterFn}; const updatedFilters = [...selectedFilters, newFilter]; setSelectedFilters(updatedFilters); } @@ -59,11 +55,9 @@ function FilterColumn({ columns }) { const filter = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters']?.find((filter) => filter.id === column.id); if (column.filterFn === 'betweenNum' || column.filterFn === 'betweenDate') { acc[column.id] = filter?.value || ["", ""]; - } - else if ( column.type === 'select2' ) { + } else if (column.type === 'select2') { acc[column.id] = filter?.value || []; - } - else { + } else { acc[column.id] = filter?.value || ''; } } @@ -76,7 +70,7 @@ function FilterColumn({ columns }) { const updatedFilters = selectedFilters.map(filter => { const value = values[filter.id]; if (value !== undefined) { - return { ...filter, value }; + return {...filter, value}; } return filter; }); @@ -84,7 +78,7 @@ function FilterColumn({ columns }) { const filterIndex = updatedFilters.findIndex(filter => filter.id === fieldName); if (filterIndex === -1 && value !== '' && value !== null && value !== undefined) { const column = columns.find(col => col.id === fieldName); - updatedFilters.push({ id: fieldName, value, fn: column.filterFn, datatype: column.datatype }); + updatedFilters.push({id: fieldName, value, fn: column.filterFn, datatype: column.datatype}); } }); @@ -107,29 +101,33 @@ function FilterColumn({ columns }) { return ( <> - - + + + + + فیلتر @@ -137,7 +135,7 @@ function FilterColumn({ columns }) { - + {columns.map((column, index) => ( column.enableColumnFilter && @@ -188,10 +186,11 @@ function FilterColumn({ columns }) { ))} - - - - + + + + diff --git a/src/components/SelectBox.jsx b/src/core/components/DataTable/filter/SelectBox.jsx similarity index 100% rename from src/components/SelectBox.jsx rename to src/core/components/DataTable/filter/SelectBox.jsx diff --git a/src/components/SelectBoxMultiple.jsx b/src/core/components/DataTable/filter/SelectBoxMultiple.jsx similarity index 100% rename from src/components/SelectBoxMultiple.jsx rename to src/core/components/DataTable/filter/SelectBoxMultiple.jsx diff --git a/src/components/FilterBox.jsx b/src/core/components/DataTable/filter/TextFieldWithFnBox/FilterBox.jsx similarity index 100% rename from src/components/FilterBox.jsx rename to src/core/components/DataTable/filter/TextFieldWithFnBox/FilterBox.jsx diff --git a/src/components/TextFieldWithFnBox.jsx b/src/core/components/DataTable/filter/TextFieldWithFnBox/TextFieldWithFnBox.jsx similarity index 59% rename from src/components/TextFieldWithFnBox.jsx rename to src/core/components/DataTable/filter/TextFieldWithFnBox/TextFieldWithFnBox.jsx index 6ba443b..18600dc 100644 --- a/src/components/TextFieldWithFnBox.jsx +++ b/src/core/components/DataTable/filter/TextFieldWithFnBox/TextFieldWithFnBox.jsx @@ -1,9 +1,17 @@ -import {IconButton, Paper, TextField} from '@mui/material'; +import {IconButton, TextField} from '@mui/material'; import ArtTrackIcon from '@mui/icons-material/ArtTrack'; import {useEffect, useState} from "react"; -import FilterBox from "@/components/FilterBox"; +import FilterBox from "@/core/components/DataTable/filter/TextFieldWithFnBox/FilterBox"; -const TextFieldWithFnBox = ({formik, id , header, defaultValue, defaultFilter , columnFilterModeOptions ,onSelectFilter}) => { +const TextFieldWithFnBox = ({ + formik, + id, + header, + defaultValue, + defaultFilter, + columnFilterModeOptions, + onSelectFilter + }) => { const [anchorEl, setAnchorEl] = useState(null); const [open, setOpen] = useState(false); @@ -35,7 +43,7 @@ const TextFieldWithFnBox = ({formik, id , header, defaultValue, defaultFilter , InputProps={{ endAdornment: ( - + ) }} @@ -43,7 +51,9 @@ const TextFieldWithFnBox = ({formik, id , header, defaultValue, defaultFilter , position: 'relative' }} /> - + ); }; diff --git a/src/core/components/DataTable/index.js b/src/core/components/DataTable/index.js index f453ade..408994a 100644 --- a/src/core/components/DataTable/index.js +++ b/src/core/components/DataTable/index.js @@ -1,123 +1,122 @@ -import { useMaterialReactTable } from "material-react-table"; +import {useMaterialReactTable} from "material-react-table"; import DataTable_Main from "./Main"; -import { FA_DATATABLE_LOCALIZATION } from "./localization/fa/datatable"; -import CustomToolbar from "@/components/CustomToolbar"; +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 data = [ - { - name: { - firstName: 'John', - lastName: 'Doe', + { + name: { + firstName: 'John', + lastName: 'Doe', + }, + address: '261 Erdman Ford', + city: 'East Daphne', + state: 'Kentucky', }, - address: '261 Erdman Ford', - city: 'East Daphne', - state: 'Kentucky', - }, - { - name: { - firstName: 'Jane', - lastName: 'Doe', + { + name: { + firstName: 'Jane', + lastName: 'Doe', + }, + address: '769 Dominic Grove', + city: 'Columbus', + state: 'Ohio', }, - address: '769 Dominic Grove', - city: 'Columbus', - state: 'Ohio', - }, - { - name: { - firstName: 'Joe', - lastName: 'Doe', + { + name: { + firstName: 'Joe', + lastName: 'Doe', + }, + address: '566 Brakus Inlet', + city: 'South Linda', + state: 'West Virginia', }, - address: '566 Brakus Inlet', - city: 'South Linda', - state: 'West Virginia', - }, - { - name: { - firstName: 'Kevin', - lastName: 'Vandy', + { + name: { + firstName: 'Kevin', + lastName: 'Vandy', + }, + address: '722 Emie Stream', + city: 'Lincoln', + state: 'Nebraska', }, - address: '722 Emie Stream', - city: 'Lincoln', - state: 'Nebraska', - }, - { - name: { - firstName: 'Joshua', - lastName: 'Rolluffs', + { + name: { + firstName: 'Joshua', + lastName: 'Rolluffs', + }, + address: '32188 Larkin Turnpike', + city: 'Charleston', + state: 'South Carolina', }, - address: '32188 Larkin Turnpike', - city: 'Charleston', - state: 'South Carolina', - }, ]; const DataTable = (props) => { - const { userId, pageName, tableName, columns, initialStateProps } = props - const { settingStore, hideAction, sortAction } = useTableSetting(); - const flatColumns = flattenArrayOfObjects(columns,'columns') + const {userId, pageName, tableName, columns, initialStateProps} = props + const {settingStore, hideAction, sortAction} = useTableSetting(); + const flatColumns = flattenArrayOfObjects(columns, 'columns') - 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); - } + 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); + } - const table = useMaterialReactTable({ - localization: FA_DATATABLE_LOCALIZATION, - columns, - data: data, - // manualSorting: true, - renderTopToolbarCustomActions: ({ table }) => (<> - - ), - 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 - }) + const table = useMaterialReactTable({ + localization: FA_DATATABLE_LOCALIZATION, + columns, + data: data, + // manualSorting: true, + renderTopToolbarCustomActions: ({table}) => (<> + + ), + 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 ; + return ; }; export default DataTable; diff --git a/src/core/components/DataTable/table/Paper.js b/src/core/components/DataTable/table/Paper.js index db3bbec..ede47c1 100644 --- a/src/core/components/DataTable/table/Paper.js +++ b/src/core/components/DataTable/table/Paper.js @@ -1,78 +1,78 @@ -import { parseFromValuesOrFunc } from "@/core/utils/utils"; -import { Paper } from "@mui/material"; +import {parseFromValuesOrFunc} from "@/core/utils/utils"; +import {Paper} from "@mui/material"; import DataTable_BottomToolbar from "../toolbar/BottomToolbar"; import DataTable_TopToolbar from "../toolbar/TopToolbar"; import DataTable_TableContainer from "./TableContainer"; -const DataTable_Paper = ({ table, ...rest }) => { - const { - getState, - options: { - enableBottomToolbar, - enableTopToolbar, - mrtTheme: { baseBackgroundColor }, - muiTablePaperProps, - renderBottomToolbar, - renderTopToolbar, - }, - refs: { tablePaperRef }, - } = table; +const DataTable_Paper = ({table, ...rest}) => { + const { + getState, + options: { + enableBottomToolbar, + enableTopToolbar, + mrtTheme: {baseBackgroundColor}, + muiTablePaperProps, + renderBottomToolbar, + renderTopToolbar, + }, + refs: {tablePaperRef}, + } = table; - const { isFullScreen } = getState(); + const {isFullScreen} = getState(); - const paperProps = { - ...parseFromValuesOrFunc(muiTablePaperProps, { table }), - ...rest, - }; + const paperProps = { + ...parseFromValuesOrFunc(muiTablePaperProps, {table}), + ...rest, + }; - return ( - { - tablePaperRef.current = ref; - if (paperProps?.ref) { - //@ts-ignore - paperProps.ref.current = ref; - } - }} - style={{ - ...(isFullScreen - ? { - bottom: 0, - height: '100dvh', - left: 0, - margin: 0, - maxHeight: '100dvh', - maxWidth: '100dvw', - padding: 0, - position: 'fixed', - right: 0, - top: 0, - width: '100dvw', - zIndex: 999, - } - : {}), - ...paperProps?.style, - }} - sx={(theme) => ({ - backgroundColor: baseBackgroundColor, - backgroundImage: 'unset', - overflow: 'hidden', - transition: 'all 100ms ease-in-out', - ...(parseFromValuesOrFunc(paperProps?.sx, theme)), - })} - > - {enableTopToolbar && - (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? ( - - ))} - - {enableBottomToolbar && - (parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? ( - - ))} - - ); + return ( + { + tablePaperRef.current = ref; + if (paperProps?.ref) { + //@ts-ignore + paperProps.ref.current = ref; + } + }} + style={{ + ...(isFullScreen + ? { + bottom: 0, + height: '100dvh', + left: 0, + margin: 0, + maxHeight: '100dvh', + maxWidth: '100dvw', + padding: 0, + position: 'fixed', + right: 0, + top: 0, + width: '100dvw', + zIndex: 999, + } + : {}), + ...paperProps?.style, + }} + sx={(theme) => ({ + backgroundColor: baseBackgroundColor, + backgroundImage: 'unset', + overflow: 'hidden', + transition: 'all 100ms ease-in-out', + ...(parseFromValuesOrFunc(paperProps?.sx, theme)), + })} + > + {enableTopToolbar && + (parseFromValuesOrFunc(renderTopToolbar, {table}) ?? ( + + ))} + + {enableBottomToolbar && + (parseFromValuesOrFunc(renderBottomToolbar, {table}) ?? ( + + ))} + + ); }; export default DataTable_Paper; diff --git a/src/core/components/DataTable/toolbar/TopToolbar.js b/src/core/components/DataTable/toolbar/TopToolbar.js index 4eb0aba..46bae3e 100644 --- a/src/core/components/DataTable/toolbar/TopToolbar.js +++ b/src/core/components/DataTable/toolbar/TopToolbar.js @@ -1,10 +1,11 @@ -import { getCommonToolbarStyles, parseFromValuesOrFunc } from "@/core/utils/utils"; -import { Box, useMediaQuery } from "@mui/material"; +import {getCommonToolbarStyles, parseFromValuesOrFunc} from "@/core/utils/utils"; +import {Box, useMediaQuery} from "@mui/material"; import DataTable_LinearProgressBar from "./LinearProgressBar"; import DataTable_TablePagination from "./TablePagination"; import DataTable_ToolbarInternalButtons from "./ToolbarInternalButtons"; +import FilterColumn from "@/core/components/DataTable/filter/FilterColumn"; -const DataTable_TopToolbar = ({ table }) => { +const DataTable_TopToolbar = ({table, columns}) => { const { getState, options: { @@ -14,14 +15,14 @@ const DataTable_TopToolbar = ({ table }) => { positionPagination, renderTopToolbarCustomActions, }, - refs: { topToolbarRef }, + refs: {topToolbarRef}, } = table; - const { isFullScreen, showGlobalFilter } = getState(); + const {isFullScreen, showGlobalFilter} = getState(); const isMobile = useMediaQuery('(max-width:720px)'); const isTablet = useMediaQuery('(max-width:1024px)'); - const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table }); + const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, {table}); const stackAlertBanner = isMobile || @@ -39,7 +40,7 @@ const DataTable_TopToolbar = ({ table }) => { } }} sx={(theme) => ({ - ...getCommonToolbarStyles({ table, theme }), + ...getCommonToolbarStyles({table, theme}), position: isFullScreen ? 'sticky' : 'relative', top: isFullScreen ? '0' : undefined, ...(parseFromValuesOrFunc(toolbarProps?.sx, theme)), @@ -59,7 +60,7 @@ const DataTable_TopToolbar = ({ table }) => { width: '100%', }} > - {renderTopToolbarCustomActions?.({ table }) ?? } + {renderTopToolbarCustomActions?.({table}) ?? } {enableToolbarInternalActions && ( { justifyContent: 'flex-end', }} > - + + )} {enablePagination && ['both', 'top'].includes(positionPagination ?? '') && ( - + )} - + ); }