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

Merge branch 'feature/mohammad_table_updating' into 'develop'

Browse Source 
clear structure of datatable directories

See merge request witel-front-end/rms!5
This commit is contained in:
AmirHossein Mahmoodi
2024-04-30 06:31:23 +00:00
parent 6136757603 0445fc8331
commit 0606463eda
18 changed files with 321 additions and 585 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/app/page.js
View File

@@ -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 (
<>
<DataTable columns={columns} userId={0} pageName={'testPage'} tableName={'testTable'} />
</>
);
return <HomeComponent/>;
}
export default Page;

20
src/components/CustomToolbar.jsx
View File

@@ -1,20 +0,0 @@
import FilterColumn from "@/components/FilterColumn";
const CustomToolbar = ({columns}) => {
return (
<FilterColumn columns={columns}/>
)
}
export default CustomToolbar

104
src/components/DataTableTest.jsx
View File

@@ -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 (
<>
<Typography>{settingStore?.[userId]?.[pageName]?.[tableName]?.['summary']}</Typography>
<MaterialReactTable
columns={columns}
data={data}
manualSorting={true}
renderTopToolbarCustomActions={({table}) => (<>
<CustomToolbar
columns={columns}
/>
</>)}
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;

41
src/components/MapTest.jsx
View File

@@ -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 (
<>
<Typography>hello</Typography>
</>
)
}
export default MapTest

20
src/components/home/Toolbar.jsx Normal file
View File

@@ -0,0 +1,20 @@
import {Button} from "@mui/material";
const Toolbar = ({columns}) => {
return (
<Button>add something</Button>
)
}
export default Toolbar

77
src/components/DataTableMain.jsx → src/components/home/index.jsx
View File

@@ -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 (
<>
<DataTableTest columns={columns}/>
<DataTable columns={columns} userId={0} pageName={'testPage'} tableName={'testTable'}/>
</>
);
}
export default DataTableMain;
export default HomeComponent;

4
src/core/components/DataTable/Main.js
View File

@@ -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 <DataTable_Paper table={table} />;
return <DataTable_Paper table={table} columns={props.columns}/>;
};
export default DataTable_Main;

0
src/components/BetweenNumberFilter.jsx → src/core/components/DataTable/filter/BetweenNumberFilter.jsx
View File

14
src/components/BetweenDateFilter.jsx → src/core/components/DataTable/filter/DatePicker/BetweenDateFilter.jsx
View File

@@ -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 (
<Grid container spacing={1} mt={1} mb={2}>
<Grid item xs={6}>
<MuiDatePicker label="تاریخ شروع " name={`${id}[0]`} formik={formik} defaultValue={defaultValue?.[0]} minDate={null} maxDate={dateRange[1]} onDateChange={(value) => handleDateChange(0, value)}/>
<MuiDatePicker label="تاریخ شروع " name={`${id}[0]`} formik={formik} defaultValue={defaultValue?.[0]}
minDate={null} maxDate={dateRange[1]}
onDateChange={(value) => handleDateChange(0, value)}/>
</Grid>
<Grid item xs={6}>
<MuiDatePicker label="تاریخ پایان" name={`${id}[1]`} formik={formik} defaultValue={defaultValue?.[1]} minDate={dateRange[0]} maxDate={null} onDateChange={(value) => handleDateChange(1, value)}/>
<Grid item xs={6}>
<MuiDatePicker label="تاریخ پایان" name={`${id}[1]`} formik={formik} defaultValue={defaultValue?.[1]}
minDate={dateRange[0]} maxDate={null}
onDateChange={(value) => handleDateChange(1, value)}/>
</Grid>
</Grid>
);

0
src/components/MuiDatePicker.jsx → src/core/components/DataTable/filter/DatePicker/MuiDatePicker.jsx
View File

95
src/components/FilterColumn.jsx → src/core/components/DataTable/filter/FilterColumn.jsx
View File

@@ -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 (
<>
<Button onClick={toggleDrawer(true)}>Open drawer</Button>
<Drawer open={open} onClose={toggleDrawer(false)}
sx={{
"& .MuiDrawer-paper": {
padding: '16px',
overflowY: 'auto',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
scrollbarWidth: 'thin',
width:450,
"&::-webkit-scrollbar": {
width: '8px',
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: '#ccc',
borderRadius: '4px',
},
"@media (max-width: 600px)": {
width: '100%'
},
}
}}
<Tooltip title="فیلتر">
<IconButton onClick={toggleDrawer(true)} aria-label="filter table">
<FilterAltIcon/>
</IconButton>
</Tooltip>
<Drawer open={open} onClose={toggleDrawer(false)}
sx={{
"& .MuiDrawer-paper": {
padding: '16px',
overflowY: 'auto',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
scrollbarWidth: 'thin',
width: 450,
"&::-webkit-scrollbar": {
width: '8px',
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: '#ccc',
borderRadius: '4px',
},
"@media (max-width: 600px)": {
width: '100%'
},
}
}}
>
<DrawerHeader>
<Typography variant="h6" mb={2}>فیلتر</Typography>
@@ -137,7 +135,7 @@ function FilterColumn({ columns }) {
<CloseIcon/>
</IconButton>
</DrawerHeader>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Box sx={{display: 'flex', flexDirection: 'column'}}>
<FormControl fullWidth>
{columns.map((column, index) => (
column.enableColumnFilter &&
@@ -188,10 +186,11 @@ function FilterColumn({ columns }) {
))}
</FormControl>
</Box>
<Box sx={{ mt:2 }}>
<Divider />
<Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<Button variant="contained" size="medium" onClick={formik.handleSubmit} sx={{ mt: 1 }}>ثبت</Button>
<Box sx={{mt: 2}}>
<Divider/>
<Box sx={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
<Button variant="contained" size="medium" onClick={formik.handleSubmit}
sx={{mt: 1}}>ثبت</Button>
</Box>
</Box>
</Drawer>

0
src/components/SelectBox.jsx → src/core/components/DataTable/filter/SelectBox.jsx
View File

0
src/components/SelectBoxMultiple.jsx → src/core/components/DataTable/filter/SelectBoxMultiple.jsx
View File

0
src/components/FilterBox.jsx → src/core/components/DataTable/filter/TextFieldWithFnBox/FilterBox.jsx
View File

20
src/components/TextFieldWithFnBox.jsx → src/core/components/DataTable/filter/TextFieldWithFnBox/TextFieldWithFnBox.jsx
View File

@@ -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: (
<IconButton onClick={handleClick}>
<ArtTrackIcon />
<ArtTrackIcon/>
</IconButton>
)
}}
@@ -43,7 +51,9 @@ const TextFieldWithFnBox = ({formik, id , header, defaultValue, defaultFilter ,
position: 'relative'
}}
/>
<FilterBox anchorEl={anchorEl} open={open} handleClose={handleClose} columnFilterModeOptions={columnFilterModeOptions} onSelectFilter={onSelectFilter} defaultFilter={defaultFilter}/>
<FilterBox anchorEl={anchorEl} open={open} handleClose={handleClose}
columnFilterModeOptions={columnFilterModeOptions} onSelectFilter={onSelectFilter}
defaultFilter={defaultFilter}/>
</>
);
};

205
src/core/components/DataTable/index.js
View File

@@ -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 }) => (<>
<CustomToolbar
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"
}
},
},
onColumnVisibilityChange: onColumnVisibilityChange,
onSortingChange: onSortingChange,
...props
})
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"
}
},
},
onColumnVisibilityChange: onColumnVisibilityChange,
onSortingChange: onSortingChange,
...props
})
return <DataTable_Main table={table} />;
return <DataTable_Main table={table} columns={columns}/>;
};
export default DataTable;

138
src/core/components/DataTable/table/Paper.js
View File

@@ -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 (
<Paper
elevation={0}
{...paperProps}
ref={(ref) => {
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 }) ?? (
<DataTable_TopToolbar table={table} />
))}
<DataTable_TableContainer table={table} />
{enableBottomToolbar &&
(parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? (
<DataTable_BottomToolbar table={table} />
))}
</Paper>
);
return (
<Paper
elevation={0}
{...paperProps}
ref={(ref) => {
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}) ?? (
<DataTable_TopToolbar table={table} columns={paperProps.columns}/>
))}
<DataTable_TableContainer table={table}/>
{enableBottomToolbar &&
(parseFromValuesOrFunc(renderBottomToolbar, {table}) ?? (
<DataTable_BottomToolbar table={table}/>
))}
</Paper>
);
};
export default DataTable_Paper;

24
src/core/components/DataTable/toolbar/TopToolbar.js
View File

@@ -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 }) ?? <span />}
{renderTopToolbarCustomActions?.({table}) ?? <span/>}
{enableToolbarInternalActions && (
<Box
sx={{
@@ -70,15 +71,16 @@ const DataTable_TopToolbar = ({ table }) => {
justifyContent: 'flex-end',
}}
>
<DataTable_ToolbarInternalButtons table={table} />
<FilterColumn columns={columns}/>
<DataTable_ToolbarInternalButtons table={table}/>
</Box>
)}
</Box>
{enablePagination &&
['both', 'top'].includes(positionPagination ?? '') && (
<DataTable_TablePagination position="top" table={table} />
<DataTable_TablePagination position="top" table={table}/>
)}
<DataTable_LinearProgressBar isTopToolbar table={table} />
<DataTable_LinearProgressBar isTopToolbar table={table}/>
</Box>
);
}