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

Merge branch 'feature/mohammad_improve_table' into 'develop'

Browse Source 
Feature/mohammad improve table

See merge request witel-front-end/rms!6
This commit is contained in:
AmirHossein Mahmoodi
2024-05-18 12:07:34 +00:00
parent ef551d0cf3 0111ad5db3
commit a383c8510e
11 changed files with 272 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/home/index.jsx
View File

@@ -17,6 +17,7 @@ function HomeComponent() {
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "contains", filterFn: "contains",
inputType: "textField",
enableClickToCopy: true, enableClickToCopy: true,
columnFilterModeOptions: [ columnFilterModeOptions: [
"equals", "equals",
@@ -30,7 +31,8 @@ function HomeComponent() {
id: "lastName", id: "lastName",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "contains", filterFn: "equals",
inputType: "textField",
columnFilterModeOptions: [ columnFilterModeOptions: [
"equals", "equals",
"notEquals", "notEquals",
@@ -38,14 +40,6 @@ function HomeComponent() {
], ],
}, },
], ],
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains"
],
}, },
{ {
accessorKey: 'address', accessorKey: 'address',
@@ -53,7 +47,8 @@ function HomeComponent() {
id: "address", id: "address",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "contains", filterFn: "notEquals",
inputType: "textField",
columnFilterModeOptions: [ columnFilterModeOptions: [
"equals", "equals",
"notEquals", "notEquals",
@@ -66,14 +61,15 @@ function HomeComponent() {
id: "city", id: "city",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "contains", filterFn: "equals",
inputType: "textField",
columnFilterModeOptions: [ columnFilterModeOptions: [
"equals", "equals",
"notEquals", "notEquals",
"contains", "contains",
"lessThan", "lessThan",
"greaterThan", "greaterThan",
"between", "fuzzy"
], ],
}, },
@@ -81,10 +77,10 @@ function HomeComponent() {
accessorKey: 'state', accessorKey: 'state',
header: 'وضعیت', header: 'وضعیت',
id: "state", id: "state",
text: 'نام',
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "contains", filterFn: "contains",
inputType: "textField",
columnFilterModeOptions: [ columnFilterModeOptions: [
"equals", "equals",
"notEquals", "notEquals",
@@ -92,46 +88,40 @@ function HomeComponent() {
], ],
}, },
{ {
accessorKey: 'state', accessorKey: 'price',
header: 'محدوده', header: 'محدوده',
id: "betweenNum", id: "price",
text: 'محدوده',
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "nemeric",
filterFn: "betweenNum", filterFn: "between",
columnFilterModeOptions: [], inputType: "betweenNum",
}, },
{ {
accessorKey: 'state', accessorKey: 'updated_at',
header: 'تاریخ', header: 'تاریخ بروزرسانی',
id: "betweenDate", id: "updated_at",
text: 'تاریخ',
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "date",
filterFn: "betweenDate", filterFn: "between",
columnFilterModeOptions: [], inputType: "betweenDate",
}, },
{ {
accessorKey: 'state', accessorKey: 'company',
header: 'شلکت', header: 'نام شرکت',
id: "select2", id: "company",
text: 'تاریخ',
type: 'select2',
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "equals", filterFn: "equals",
columnFilterModeOptions: [], inputType: "select2",
}, },
{ {
accessorKey: 'state', accessorKey: 'area',
header: 'سلکت', header: 'منطقه',
id: "select", id: "area",
text: 'تنتنت',
type: 'select',
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "equals", filterFn: "equals",
columnFilterModeOptions: [], inputType: "select",
}, },
], ],
[], [],

28
src/core/components/DataTable/filter/FilterColumn.jsx
View File

@@ -1,7 +1,6 @@
"use client" "use client"
import {Box, Button, Divider, Drawer, FormControl, IconButton, styled, Tooltip, Typography} from '@mui/material'; import {Box, Button, Divider, Drawer, FormControl, IconButton, styled, Tooltip, Typography} from '@mui/material';
import {useFormik} from 'formik'; import {useFormik} from 'formik';
import TextFieldWithFnBox from "@/core/components/DataTable/filter/TextFieldWithFnBox/TextFieldWithFnBox";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import useTableSetting from "@/lib/hooks/useTableSetting"; import useTableSetting from "@/lib/hooks/useTableSetting";
import BetweenNumberFilter from "@/core/components/DataTable/filter/BetweenNumberFilter"; import BetweenNumberFilter from "@/core/components/DataTable/filter/BetweenNumberFilter";
@@ -10,13 +9,14 @@ import SelectBoxMultiple from "@/core/components/DataTable/filter/SelectBoxMulti
import SelectBox from "@/core/components/DataTable/filter/SelectBox"; import SelectBox from "@/core/components/DataTable/filter/SelectBox";
import FilterAltIcon from '@mui/icons-material/FilterAlt'; import FilterAltIcon from '@mui/icons-material/FilterAlt';
import CloseIcon from '@mui/icons-material/Close'; import CloseIcon from '@mui/icons-material/Close';
import TextFieldWithFnBox from "@/core/components/DataTable/filter/TextFieldWithFnBox/TextFieldWithFnBox";
function FilterColumn({columns}) { function FilterColumn({columns}) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [selectedFilters, setSelectedFilters] = useState([]); const [selectedFilters, setSelectedFilters] = useState([]);
const [userId, setUserId] = useState(2); const [userId, setUserId] = useState(0);
const [pageName, setPageName] = useState('loan'); const [pageName, setPageName] = useState('testPage');
const [tableName, setTableName] = useState('loan_table'); const [tableName, setTableName] = useState('testTable');
const {settingStore, hideAction, filterAction, sortAction,} = useTableSetting(); const {settingStore, hideAction, filterAction, sortAction,} = useTableSetting();
const DrawerHeader = styled('div')(({theme}) => ({ const DrawerHeader = styled('div')(({theme}) => ({
@@ -34,11 +34,13 @@ function FilterColumn({columns}) {
useEffect(() => { useEffect(() => {
const settingValue = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []; const settingValue = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || [];
setSelectedFilters(settingValue.length > 0 ? settingValue : []); setSelectedFilters(settingValue.length > 0 ? settingValue : []);
if (!settingValue.length > 0) {
formik.resetForm();
}
}, [settingStore]); }, [settingStore]);
const handleSelectFilter = (fieldName, filterFn) => { const handleSelectFilter = (fieldName, filterFn) => {
const filterIndex = selectedFilters.findIndex(filter => filter.id === fieldName); const filterIndex = selectedFilters.findIndex(filter => filter.id === fieldName);
if (filterIndex !== -1) { if (filterIndex !== -1) {
const updatedFilters = [...selectedFilters]; const updatedFilters = [...selectedFilters];
updatedFilters[filterIndex].fn = filterFn; updatedFilters[filterIndex].fn = filterFn;
@@ -98,7 +100,7 @@ function FilterColumn({columns}) {
} }
}); });
console.log(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'])
return ( return (
<> <>
<Tooltip title="فیلتر"> <Tooltip title="فیلتر">
@@ -139,36 +141,32 @@ function FilterColumn({columns}) {
<FormControl fullWidth> <FormControl fullWidth>
{columns.map((column, index) => ( {columns.map((column, index) => (
column.enableColumnFilter && column.enableColumnFilter &&
(column.filterFn === 'betweenDate' ? (column.inputType === 'betweenDate' ?
<BetWeenDateFilter <BetWeenDateFilter
key={index} key={index}
id={column.id} id={column.id}
formik={formik} formik={formik}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''} defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}
/> />
: column.filterFn === 'betweenNum' ? : column.inputType === 'betweenNum' ?
<BetweenNumberFilter <BetweenNumberFilter
key={index} key={index}
id={column.id} id={column.id}
formik={formik} formik={formik}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ["", ""]} defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ["", ""]}
/> />
: column.type === 'select2' ? : column.inputType === 'select2' ?
<SelectBoxMultiple <SelectBoxMultiple
key={index} key={index}
id={column.id} id={column.id}
formik={formik} formik={formik}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || []} defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || []}
/> />
: column.type === 'select' ? : column.inputType === 'select' ?
<SelectBox <SelectBox
key={index} key={index}
id={column.id} id={column.id}
formik={formik} formik={formik}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''} defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}
/> />
: :
@@ -177,7 +175,7 @@ function FilterColumn({columns}) {
id={column.id} id={column.id}
header={column.header} header={column.header}
formik={formik} formik={formik}
defaultFilter={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.fn || column.filterFn} defaultFilter={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.fn || column._filterFn}
columnFilterModeOptions={column.columnFilterModeOptions} columnFilterModeOptions={column.columnFilterModeOptions}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)} onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={formik.values[column.id] || (settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''} defaultValue={formik.values[column.id] || (settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}

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

@@ -1,22 +1,38 @@
import { Popper, Paper, List, ListItem, ListItemText, ClickAwayListener } from '@mui/material'; import {ClickAwayListener, List, ListItem, ListItemText, Paper, Popper} from '@mui/material';
import {useState} from "react";
function FilterBox({anchorEl , open = false, handleClose = () => {} , columnFilterModeOptions , onSelectFilter , defaultFilter}) { const columnFilterModeOptionFa = {
equals: "برابر",
notEquals: "نابرابر",
contains: "شامل",
lessThan: "کوچکتر",
greaterThan: "بزرگتر",
fuzzy: "فازی",
}
function FilterBox({
anchorEl, open = false, handleClose = () => {
}, columnFilterModeOptions, onSelectFilter, defaultFilter
}) {
const [selectedFilter, setSelectedFilter] = useState(defaultFilter);
const id = open ? 'simple-popper' : undefined; const id = open ? 'simple-popper' : undefined;
const handleSelectFilter = (filterFn) => { const handleSelectFilter = (filterFn) => {
setSelectedFilter(filterFn);
onSelectFilter(filterFn); onSelectFilter(filterFn);
handleClose(); handleClose();
}; };
return ( return (
<div> <div>
<Popper id={id} open={open} anchorEl={anchorEl} placement="bottom" style={{ zIndex: 1301 }}> <Popper id={id} open={open} anchorEl={anchorEl} placement="bottom" style={{zIndex: 1301}}>
<ClickAwayListener onClickAway={handleClose}> <ClickAwayListener onClickAway={handleClose}>
<Paper> <Paper>
<List> <List>
{columnFilterModeOptions.map((option, index) => ( {columnFilterModeOptions.map((option, index) => (
<ListItem key={index} onClick={() => handleSelectFilter(option)} selected={option === defaultFilter} sx={{ cursor: 'pointer' }}> <ListItem key={index} onClick={() => handleSelectFilter(option)}
<ListItemText primary={option} /> selected={option === selectedFilter} sx={{cursor: 'pointer'}}>
<ListItemText primary={columnFilterModeOptionFa[option]}/>
</ListItem> </ListItem>
))} ))}
</List> </List>

21
src/core/components/DataTable/head/TableHead.js
View File

@@ -1,12 +1,12 @@
import { parseFromValuesOrFunc } from "@/core/utils/utils"; import {parseFromValuesOrFunc} from "@/core/utils/utils";
import { TableHead } from "@mui/material"; import {TableHead} from "@mui/material";
import DataTable_TableHeadRow from "./TableHeadRow"; import DataTable_TableHeadRow from "./TableHeadRow";
const DataTable_TableHead = ({ const DataTable_TableHead = ({
columnVirtualizer, columnVirtualizer,
table, table,
...rest ...rest
}) => { }) => {
const { const {
getState, getState,
options: { options: {
@@ -15,12 +15,12 @@ const DataTable_TableHead = ({
muiTableHeadProps, muiTableHeadProps,
positionToolbarAlertBanner, positionToolbarAlertBanner,
}, },
refs: { tableHeadRef }, refs: {tableHeadRef},
} = table; } = table;
const { isFullScreen, showAlertBanner } = getState(); const {isFullScreen, showAlertBanner} = getState();
const tableHeadProps = { const tableHeadProps = {
...parseFromValuesOrFunc(muiTableHeadProps, { table }), ...parseFromValuesOrFunc(muiTableHeadProps, {table}),
...rest, ...rest,
}; };
@@ -47,12 +47,13 @@ const DataTable_TableHead = ({
> >
{table {table
.getHeaderGroups() .getHeaderGroups()
.map((headerGroup) => ( .map((headerGroup, index) => (
<DataTable_TableHeadRow <DataTable_TableHeadRow
columnVirtualizer={columnVirtualizer} columnVirtualizer={columnVirtualizer}
headerGroup={headerGroup} headerGroup={headerGroup}
key={headerGroup.id} key={headerGroup.id}
table={table} table={table}
index={index}
/> />
)) ))
} }

126
src/core/components/DataTable/head/TableHeadCell.js
View File

@@ -1,16 +1,16 @@
import { getCommonMRTCellStyles, parseFromValuesOrFunc } from "@/core/utils/utils"; import {getCommonMRTCellStyles, parseFromValuesOrFunc} from "@/core/utils/utils";
import { useTheme } from "@emotion/react"; import {useTheme} from "@emotion/react";
import { Box, TableCell } from "@mui/material"; import {Box, TableCell} from "@mui/material";
import { MRT_TableHeadCellSortLabel } from "material-react-table"; import {MRT_TableHeadCellSortLabel} from "material-react-table";
import { useMemo } from "react"; import {useMemo} from "react";
const DataTable_TableHeadCell = ({ const DataTable_TableHeadCell = ({
columnVirtualizer, columnVirtualizer,
header, header,
staticColumnIndex, staticColumnIndex,
table, table,
...rest ...rest
}) => { }) => {
const theme = useTheme(); const theme = useTheme();
const { const {
getState, getState,
@@ -24,10 +24,10 @@ const DataTable_TableHeadCell = ({
enableGrouping, enableGrouping,
enableMultiSort, enableMultiSort,
layoutMode, layoutMode,
mrtTheme: { draggingBorderColor }, mrtTheme: {draggingBorderColor},
muiTableHeadCellProps, muiTableHeadCellProps,
}, },
refs: { tableHeadCellRefs }, refs: {tableHeadCellRefs},
setHoveredColumn, setHoveredColumn,
} = table; } = table;
const { const {
@@ -38,12 +38,12 @@ const DataTable_TableHeadCell = ({
hoveredColumn, hoveredColumn,
showColumnFilters, showColumnFilters,
} = getState(); } = getState();
const { column } = header; const {column} = header;
const { columnDef } = column; const {columnDef} = column;
const { columnDefType } = columnDef; const {columnDefType} = columnDef;
const tableCellProps = { const tableCellProps = {
...parseFromValuesOrFunc(muiTableHeadCellProps, { column, table }), ...parseFromValuesOrFunc(muiTableHeadCellProps, {column, table}),
...parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, { ...parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, {
column, column,
table, table,
@@ -93,8 +93,8 @@ const DataTable_TableHeadCell = ({
if (showResizeBorder) { if (showResizeBorder) {
return columnResizeDirection === 'ltr' return columnResizeDirection === 'ltr'
? { borderRight: borderStyle } ? {borderRight: borderStyle}
: { borderLeft: borderStyle }; : {borderLeft: borderStyle};
} }
const draggingBorders = borderStyle const draggingBorders = borderStyle
? { ? {
@@ -172,47 +172,47 @@ const DataTable_TableHeadCell = ({
}} }}
{...tableCellProps} {...tableCellProps}
sx={(theme) => ({ sx={(theme) => ({
'& :hover': { '& :hover': {
'.MuiButtonBase-root': { '.MuiButtonBase-root': {
opacity: 1, opacity: 1,
},
}, },
}, flexDirection: layoutMode?.startsWith('grid') ? 'column' : undefined,
flexDirection: layoutMode?.startsWith('grid') ? 'column' : undefined, fontWeight: 'bold',
fontWeight: 'bold', overflow: 'visible',
overflow: 'visible', p:
p: density === 'compact'
density === 'compact' ? '0.5rem'
? '0.5rem' : density === 'comfortable'
: density === 'comfortable' ? columnDefType === 'display'
? columnDefType === 'display' ? '0.75rem'
? '0.75rem' : '1rem'
: '1rem' : columnDefType === 'display'
: columnDefType === 'display' ? '1rem 1.25rem'
? '1rem 1.25rem' : '1.5rem',
: '1.5rem', pb:
pb: columnDefType === 'display'
columnDefType === 'display' ? 0
? 0 : showColumnFilters || density === 'compact'
: showColumnFilters || density === 'compact' ? '0.4rem'
? '0.4rem' : '0.6rem',
: '0.6rem', pt:
pt: columnDefType === 'group' || density === 'compact'
columnDefType === 'group' || density === 'compact' ? '0.25rem'
? '0.25rem' : density === 'comfortable'
: density === 'comfortable' ? '.75rem'
? '.75rem' : '1.25rem',
: '1.25rem', userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined, verticalAlign: 'middle',
verticalAlign: 'middle', ...getCommonMRTCellStyles({
...getCommonMRTCellStyles({ column,
column, header,
header, table,
table, tableCellProps,
tableCellProps, theme,
theme, }),
}), ...draggingBorders,
...draggingBorders, }
}
)} )}
> >
{tableCellProps.children ?? ( {tableCellProps.children ?? (
@@ -225,7 +225,7 @@ const DataTable_TableHeadCell = ({
tableCellProps?.align === 'right' ? 'row-reverse' : 'row', tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
justifyContent: justifyContent:
columnDefType === 'group' || columnDefType === 'group' ||
tableCellProps?.align === 'center' tableCellProps?.align === 'center'
? 'center' ? 'center'
: column.getCanResize() : column.getCanResize()
? 'space-between' ? 'space-between'
@@ -262,6 +262,9 @@ const DataTable_TableHeadCell = ({
minWidth: `${Math.min(columnDef.header?.length ?? 0, 4)}ch`, minWidth: `${Math.min(columnDef.header?.length ?? 0, 4)}ch`,
overflow: columnDefType === 'data' ? 'hidden' : undefined, overflow: columnDefType === 'data' ? 'hidden' : undefined,
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
color: "#fff",
fontSize: "14px",
fontWeight: "500",
whiteSpace: whiteSpace:
(columnDef.header?.length ?? 0) < 20 (columnDef.header?.length ?? 0) < 20
? 'nowrap' ? 'nowrap'
@@ -271,7 +274,8 @@ const DataTable_TableHeadCell = ({
{HeaderElement} {HeaderElement}
</Box> </Box>
{(column.getCanSort() && columnDefType !== 'group') && ( {(column.getCanSort() && columnDefType !== 'group') && (
<MRT_TableHeadCellSortLabel sx={{ width: 20 }} header={header} table={table} /> <MRT_TableHeadCellSortLabel sx={{width: 20, color: "#fff"}} header={header}
table={table}/>
)} )}
</Box> </Box>
</Box> </Box>

86
src/core/components/DataTable/head/TableHeadRow.js
View File

@@ -1,24 +1,25 @@
import { parseFromValuesOrFunc } from "@/core/utils/utils"; import {parseFromValuesOrFunc} from "@/core/utils/utils";
import { TableRow } from "@mui/material"; import {TableRow} from "@mui/material";
import DataTable_TableHeadCell from "./TableHeadCell"; import DataTable_TableHeadCell from "./TableHeadCell";
const DataTable_TableHeadRow = ({ const DataTable_TableHeadRow = ({
columnVirtualizer, columnVirtualizer,
headerGroup, headerGroup,
table, table,
...rest index, // Add index prop
}) => { ...rest
}) => {
const { const {
options: { options: {
enableStickyHeader, enableStickyHeader,
layoutMode, layoutMode,
mrtTheme: { baseBackgroundColor },
muiTableHeadRowProps, muiTableHeadRowProps,
}, },
} = table; } = table;
const {virtualColumns, virtualPaddingLeft, virtualPaddingRight} =
columnVirtualizer ?? {};
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = const backgroundColor = index % 2 === 0 ? '#015688' : '#ff5c0f';
columnVirtualizer ?? {};
const tableRowProps = { const tableRowProps = {
...parseFromValuesOrFunc(muiTableHeadRowProps, { ...parseFromValuesOrFunc(muiTableHeadRowProps, {
@@ -26,51 +27,34 @@ const DataTable_TableHeadRow = ({
table, table,
}), }),
...rest, ...rest,
sx: (theme) => ({ // Access theme from the sx function
...(parseFromValuesOrFunc(muiTableHeadRowProps?.sx, theme) || {}),
backgroundColor, // Apply background color
display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
position: enableStickyHeader && layoutMode === 'semantic' ? 'sticky' : 'relative',
top: 0,
}),
}; };
return ( return (
<TableRow <TableRow {...tableRowProps}>
{...tableRowProps} {virtualPaddingLeft && <th style={{display: 'flex', width: virtualPaddingLeft}}/>}
sx={(theme) => ({ {(virtualColumns ?? headerGroup.headers).map((headerOrVirtualHeader, staticColumnIndex) => {
backgroundColor: baseBackgroundColor, const header = columnVirtualizer ? headerGroup.headers[headerOrVirtualHeader.index] : headerOrVirtualHeader;
display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
position: return header ? (
enableStickyHeader && layoutMode === 'semantic' <DataTable_TableHeadCell
? 'sticky' columnVirtualizer={columnVirtualizer}
: 'relative', header={header}
top: 0, key={header.id}
...(parseFromValuesOrFunc(tableRowProps?.sx, theme)), staticColumnIndex={staticColumnIndex}
table={table}
/>
) : null;
})} })}
> {virtualPaddingRight && <th style={{display: 'flex', width: virtualPaddingRight}}/>}
{virtualPaddingLeft ? (
<th style={{ display: 'flex', width: virtualPaddingLeft }} />
) : null}
{(virtualColumns ?? headerGroup.headers).map(
(headerOrVirtualHeader, staticColumnIndex) => {
let header = headerOrVirtualHeader;
if (columnVirtualizer) {
staticColumnIndex = (headerOrVirtualHeader)
.index;
header = headerGroup.headers[staticColumnIndex];
}
return header ? (
<DataTable_TableHeadCell
columnVirtualizer={columnVirtualizer}
header={header}
key={header.id}
staticColumnIndex={staticColumnIndex}
table={table}
/>
) : null;
},
)}
{virtualPaddingRight ? (
<th style={{ display: 'flex', width: virtualPaddingRight }} />
) : null}
</TableRow> </TableRow>
); );
};
} export default DataTable_TableHeadRow;
export default DataTable_TableHeadRow

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

@@ -8,48 +8,68 @@ import Toolbar from "@/components/home/Toolbar";
const data = [ const data = [
{ {
name: { name: {
firstName: 'John', firstName: 'امین',
lastName: 'Doe', lastName: 'قاسمپور',
}, },
address: '261 Erdman Ford', address: 'فلان جا',
city: 'East Daphne', city: 'تهران',
state: 'Kentucky', state: 'بررسی شده',
price: '20',
updated_at: '2024/05/02',
company: 'همراه اول',
area: 'منطقه 5',
}, },
{ {
name: { name: {
firstName: 'Jane', firstName: 'امیر حسین',
lastName: 'Doe', lastName: 'محمودی',
}, },
address: '769 Dominic Grove', address: 'فلان جا',
city: 'Columbus', city: 'تهران',
state: 'Ohio', state: 'تکمیل شده',
price: '27',
updated_at: '2024/05/02',
company: 'وایتل',
area: 'منطقه 27',
}, },
{ {
name: { name: {
firstName: 'Joe', firstName: 'یاسمن',
lastName: 'Doe', lastName: 'علی اکبری',
}, },
address: '566 Brakus Inlet', address: 'فلان جا',
city: 'South Linda', city: 'شیراز',
state: 'West Virginia', state: 'بررسی شده',
price: '32',
updated_at: '2024/05/02',
company: 'ایرانسل',
area: 'منطقه 23',
}, },
{ {
name: { name: {
firstName: 'Kevin', firstName: 'حمیدرضا',
lastName: 'Vandy', lastName: 'رنجبرپور',
}, },
address: '722 Emie Stream', address: 'فلان جا',
city: 'Lincoln', city: 'اصفهان',
state: 'Nebraska', state: 'بررسی شده',
price: '45',
updated_at: '2024/05/02',
company: 'ایرانول',
area: 'منطقه 21',
}, },
{ {
name: { name: {
firstName: 'Joshua', firstName: 'محمد',
lastName: 'Rolluffs', lastName: 'جلالی',
}, },
address: '32188 Larkin Turnpike', address: 'فلان جا',
city: 'Charleston', city: 'رشت',
state: 'South Carolina', state: 'درحال بررسی',
price: '8',
updated_at: '2024/05/02',
company: 'فیلیمو',
area: 'منطقه 8',
}, },
]; ];
@@ -116,7 +136,7 @@ const DataTable = (props) => {
...props ...props
}) })
return <DataTable_Main table={table} columns={columns}/>; return <DataTable_Main table={table} columns={flatColumns}/>;
}; };
export default DataTable; export default DataTable;

28
src/core/components/DataTable/refactor/RefactorTable.jsx Normal file
View File

@@ -0,0 +1,28 @@
"use client"
import {IconButton, Tooltip} from '@mui/material';
import RestartAltIcon from '@mui/icons-material/RestartAlt';
import useTableSetting from "@/lib/hooks/useTableSetting";
import {useState} from "react";
function RefactorTable() {
const {refactorAction} = useTableSetting();
const [userId, setUserId] = useState(2);
const [pageName, setPageName] = useState('loan');
const [tableName, setTableName] = useState('loan_table');
const refactor = () => {
refactorAction(userId, pageName, tableName);
};
return (
<Tooltip title="بازنشانی اطلاعات">
<IconButton onClick={refactor} aria-label="refactor table">
<RestartAltIcon/>
</IconButton>
</Tooltip>
);
}
export default RefactorTable;

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

@@ -4,6 +4,7 @@ import DataTable_LinearProgressBar from "./LinearProgressBar";
import DataTable_TablePagination from "./TablePagination"; import DataTable_TablePagination from "./TablePagination";
import DataTable_ToolbarInternalButtons from "./ToolbarInternalButtons"; import DataTable_ToolbarInternalButtons from "./ToolbarInternalButtons";
import FilterColumn from "@/core/components/DataTable/filter/FilterColumn"; import FilterColumn from "@/core/components/DataTable/filter/FilterColumn";
import RefactorTable from "@/core/components/DataTable/refactor/RefactorTable";
const DataTable_TopToolbar = ({table, columns}) => { const DataTable_TopToolbar = ({table, columns}) => {
const { const {
@@ -71,6 +72,7 @@ const DataTable_TopToolbar = ({table, columns}) => {
justifyContent: 'flex-end', justifyContent: 'flex-end',
}} }}
> >
<RefactorTable/>
<FilterColumn columns={columns}/> <FilterColumn columns={columns}/>
<DataTable_ToolbarInternalButtons table={table}/> <DataTable_ToolbarInternalButtons table={table}/>
</Box> </Box>

21
src/lib/contexts/tableSetting.jsx
View File

@@ -1,6 +1,5 @@
'use client' 'use client'
import {createContext, useCallback, useEffect, useState} from "react"; import {createContext, useCallback, useEffect, useState} from "react";
import {flattenArrayOfObjects} from "@/core/utils/flattenArrayOfObjects";
export const TableSettingContext = createContext(); export const TableSettingContext = createContext();
export const TableSettingProvider = ({children}) => { export const TableSettingProvider = ({children}) => {
@@ -53,7 +52,23 @@ export const TableSettingProvider = ({children}) => {
localStorage.setItem("_setting-app", JSON.stringify(updatedLocalStorage)); localStorage.setItem("_setting-app", JSON.stringify(updatedLocalStorage));
setSettingStore(updatedLocalStorage); setSettingStore(updatedLocalStorage);
} }
const refactorAction = (user_id, page_name, table_name) => {
const prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {};
const userSettings = prevLocalStorage[user_id] || {};
const pageSettings = userSettings[page_name] || {};
const refactorData = {
...prevLocalStorage,
[user_id]: {
...userSettings,
[page_name]: {
...pageSettings,
[table_name]: {},
},
},
};
localStorage.setItem("_setting-app", JSON.stringify(refactorData));
setSettingStore(refactorData);
}
const SummaryTextMessage = (values, columns) => { const SummaryTextMessage = (values, columns) => {
let SummaryText = ""; let SummaryText = "";
let HideText = ""; let HideText = "";
@@ -122,7 +137,7 @@ export const TableSettingProvider = ({children}) => {
return ( return (
<TableSettingContext.Provider <TableSettingContext.Provider
value={{settingStore, hideAction, sortAction, filterAction}}> value={{settingStore, hideAction, sortAction, filterAction, refactorAction}}>
{children} {children}
</TableSettingContext.Provider> </TableSettingContext.Provider>
); );

10
src/lib/hooks/useTableSetting.jsx
View File

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