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

clear structure of datatable directories

Browse Source
This commit is contained in:
Mohammad Jalali
2024-04-29 16:35:27 +03:30
parent 886a5a88a2
commit 0445fc8331
18 changed files with 321 additions and 585 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/BetweenDateFilter.jsx
View File

@@ -1,31 +0,0 @@
import {Grid} from '@mui/material';
import MuiDatePicker from "@/components/MuiDatePicker";
import {useEffect, useState} from "react";
const BetWeenDateFilter = ({formik, id , defaultValue}) => {
useEffect(() => {
formik.setFieldValue(`${id}[0]`, defaultValue?.[0] || '');
formik.setFieldValue(`${id}[1]`, defaultValue?.[1] || '');
}, []);
const [dateRange, setDateRange] = useState(defaultValue);
const handleDateChange = (index, value) => {
const newRange = [...dateRange];
newRange[index] = value;
setDateRange(newRange);
};
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)}/>
</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>
</Grid>
);
};
export default BetWeenDateFilter;

58
src/components/BetweenNumberFilter.jsx
View File

@@ -1,58 +0,0 @@
import {Grid, TextField} from '@mui/material';
import {useEffect} from "react";
const BetweenNumberFilter = ({formik, id , defaultValue}) => {
useEffect(() => {
formik.setFieldValue(`${id}[0]`, defaultValue?.[0] || '');
formik.setFieldValue(`${id}[1]`, defaultValue?.[1] || '');
}, []);
const handleBlur = (index) => () => {
const minValue = formik.values[id][0];
const maxValue = formik.values[id][1];
if (index === 0 && minValue !== '' && maxValue !== '' && parseInt(minValue) > parseInt(maxValue)) {
formik.setFieldValue(`${id}[0]`, maxValue);
}
if (index === 1 && minValue !== '' && maxValue !== '' && parseInt(maxValue) < parseInt(minValue)) {
formik.setFieldValue(`${id}[1]`, minValue);
}
};
return (
<Grid container spacing={2}>
<Grid item xs={6}>
<TextField
name={`${id}[0]`}
label="کمترین رقم"
id={`${id}_min`}
onChange={formik.handleChange}
onBlur={handleBlur(0)}
fullWidth
value={formik.values[id][0] || ''}
margin="normal"
sx={{
position: 'relative'
}}
/>
</Grid>
<Grid item xs={6}>
<TextField
name={`${id}[1]`}
label="بیشترین رقم"
id={`${id}_max`}
onChange={formik.handleChange}
onBlur={handleBlur(1)}
fullWidth
value={formik.values[id][1] || ''}
margin="normal"
sx={{
position: 'relative'
}}
/>
</Grid>
</Grid>
);
};
export default BetweenNumberFilter;

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;

30
src/components/FilterBox.jsx
View File

@@ -1,30 +0,0 @@
import { Popper, Paper, List, ListItem, ListItemText, ClickAwayListener } from '@mui/material';
function FilterBox({anchorEl , open = false, handleClose = () => {} , columnFilterModeOptions , onSelectFilter , defaultFilter}) {
const id = open ? 'simple-popper' : undefined;
const handleSelectFilter = (filterFn) => {
onSelectFilter(filterFn);
handleClose();
};
return (
<div>
<Popper id={id} open={open} anchorEl={anchorEl} placement="bottom" style={{ zIndex: 1301 }}>
<ClickAwayListener onClickAway={handleClose}>
<Paper>
<List>
{columnFilterModeOptions.map((option, index) => (
<ListItem key={index} onClick={() => handleSelectFilter(option)} selected={option === defaultFilter} sx={{ cursor: 'pointer' }}>
<ListItemText primary={option} />
</ListItem>
))}
</List>
</Paper>
</ClickAwayListener>
</Popper>
</div>
);
}
export default FilterBox;

204
src/components/FilterColumn.jsx
View File

@@ -1,204 +0,0 @@
"use client"
import {
Box,
Button, Divider, Drawer,
FormControl, IconButton, styled, Typography
} from '@mui/material';
import {useFormik} from 'formik';
import TextFieldWithFnBox from "@/components/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 CloseIcon from '@mui/icons-material/Close';
import { useTheme } from '@mui/material/styles';
function FilterColumn({ columns }) {
const [open, setOpen] = useState(false);
const [selectedFilters, setSelectedFilters] = useState([]);
const [userId, setUserId] = useState(2);
const [pageName, setPageName] = useState('loan');
const [tableName, setTableName] = useState('loan_table');
const {settingStore, hideAction, filterAction, sortAction,} = useTableSetting();
const DrawerHeader = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
padding: theme.spacing(0, 1),
justifyContent: 'space-between',
}));
const toggleDrawer = (newOpen) => () => {
setOpen(newOpen);
};
const handleDrawerClose = () => {
setOpen(false);
};
useEffect(() => {
const settingValue = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || [];
setSelectedFilters(settingValue.length > 0 ? settingValue : []);
}, [settingStore]);
const handleSelectFilter = (fieldName, filterFn) => {
const filterIndex = selectedFilters.findIndex(filter => filter.id === fieldName);
if (filterIndex !== -1) {
const updatedFilters = [...selectedFilters];
updatedFilters[filterIndex].fn = filterFn;
setSelectedFilters(updatedFilters);
} else {
const newFilter = { id: fieldName, fn: filterFn };
const updatedFilters = [...selectedFilters, newFilter];
setSelectedFilters(updatedFilters);
}
};
const initialValues = columns.reduce((acc, column) => {
if (column.enableColumnFilter) {
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' ) {
acc[column.id] = filter?.value || [];
}
else {
acc[column.id] = filter?.value || '';
}
}
return acc;
}, {});
const formik = useFormik({
initialValues,
onSubmit: (values) => {
const updatedFilters = selectedFilters.map(filter => {
const value = values[filter.id];
if (value !== undefined) {
return { ...filter, value };
}
return filter;
});
Object.entries(values).forEach(([fieldName, value]) => {
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 });
}
});
const newArrayFilter = updatedFilters.filter((filter) => {
const value = values[filter.id];
return (
value !== '' &&
value !== null &&
value !== undefined &&
!(Array.isArray(value) && (value.length === 0 || (value.length === 2 && value.every((v) => v === ''))))
);
});
setSelectedFilters(newArrayFilter);
filterAction(userId, pageName, tableName, newArrayFilter, 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%'
},
}
}}
>
<DrawerHeader>
<Typography variant="h6" mb={2}>فیلتر</Typography>
<IconButton onClick={handleDrawerClose}>
<CloseIcon/>
</IconButton>
</DrawerHeader>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<FormControl fullWidth>
{columns.map((column, index) => (
column.enableColumnFilter &&
(column.filterFn === 'betweenDate' ?
<BetWeenDateFilter
key={index}
id={column.id}
formik={formik}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}
/>
: column.filterFn === 'betweenNum' ?
<BetweenNumberFilter
key={index}
id={column.id}
formik={formik}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ["", ""]}
/>
: column.type === 'select2' ?
<SelectBoxMultiple
key={index}
id={column.id}
formik={formik}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || []}
/>
: column.type === 'select' ?
<SelectBox
key={index}
id={column.id}
formik={formik}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}
/>
:
<TextFieldWithFnBox
key={index}
id={column.id}
header={column.header}
formik={formik}
defaultFilter={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.fn || column.filterFn}
columnFilterModeOptions={column.columnFilterModeOptions}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={formik.values[column.id] || (settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}
/>
)
))}
</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>
</Box>
</Drawer>
</>
);
}
export default FilterColumn;

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

67
src/components/MuiDatePicker.jsx
View File

@@ -1,67 +0,0 @@
import { LocalizationProvider, MobileDateTimePicker } from "@mui/x-date-pickers";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "jalali-moment";
import { faIR } from "@mui/x-date-pickers/locales";
import { Box, IconButton, InputAdornment, TextField } from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import { useState } from "react";
export default function MuiDatePicker({label, name, formik, defaultValue, minDate, maxDate, onDateChange }) {
const [pickerValue, setPickerValue] = useState(defaultValue ? new Date(defaultValue) : null);
return (
<Box sx={{ position: 'relative' }}>
<LocalizationProvider
dateAdapter={AdapterDateFnsJalali}
localeText={
faIR.components.MuiLocalizationProvider.defaultProps.localeText
}
>
<MobileDateTimePicker
key={formik.values[name]}
ampm={false}
onChange={(newValue) => {
const date = new Date(newValue);
const formattedDate = moment(date)
.locale("en")
.format("YYYY-MM-DD HH:mm");
formik.setFieldValue(name, formattedDate);
onDateChange(formattedDate);
setPickerValue(newValue);
}}
slotProps={{
textField: {
placeholder: "تاریخ خود را وارد کنید",
helperText: label,
InputProps: {
endAdornment: (
<InputAdornment position="end">
<IconButton
size="small"
onClick={(event) => {
event.stopPropagation();
formik.setFieldValue(name, "");
setPickerValue(null);
}}
sx={{
color: "#bfbfbf",
'&:hover': {
backgroundColor: 'rgba(189, 189, 189, 0.1)',
},
}}
>
<ClearIcon />
</IconButton>
</InputAdornment>
),
},
},
}}
value={pickerValue}
minDate={minDate ? new Date(minDate) : null}
maxDate={maxDate ? new Date(maxDate) : null}
/>
</LocalizationProvider>
</Box>
);
}

53
src/components/SelectBox.jsx
View File

@@ -1,53 +0,0 @@
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import {useEffect, useState} from "react";
const names = [
'Oliver Hansen',
'Van Henry',
'April Tucker',
'Ralph Hubbard',
'Omar Alexander',
'Carlos Abbott',
'Miriam Wagner',
'Bradley Wilkerson',
'Virginia Andrews',
'Kelly Snyder',
];
const SelectBox = ({ formik, id, defaultValue }) => {
useEffect(() => {
formik.setFieldValue(id, defaultValue || '');
}, []);
const [selectedValue, setSelectedValue] = useState(defaultValue || '');
const handleChange = (event) => {
const { value } = event.target;
setSelectedValue(value);
formik.setFieldValue(id, value);
};
return (
<>
<FormControl sx={{ mt: 3 }}>
<InputLabel>انتخاب</InputLabel>
<Select
id={id}
value={selectedValue}
onChange={handleChange}
label="انتخاب"
>
{names.map((name) => (
<MenuItem key={name} value={name}>
{name}
</MenuItem>
))}
</Select>
</FormControl>
</>
);
};
export default SelectBox;

116
src/components/SelectBoxMultiple.jsx
View File

@@ -1,116 +0,0 @@
import {useTheme} from '@mui/material/styles';
import Box from '@mui/material/Box';
import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import Chip from '@mui/material/Chip';
import {useEffect, useState} from "react";
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250,
},
},
};
const names = [
'Oliver Hansen',
'Van Henry',
'April Tucker',
'Ralph Hubbard',
'Omar Alexander',
'Carlos Abbott',
'Miriam Wagner',
'Bradley Wilkerson',
'Virginia Andrews',
'Kelly Snyder',
];
function getStyles(name, personName, theme) {
return {
fontWeight:
personName.indexOf(name) === -1
? theme.typography.fontWeightRegular
: theme.typography.fontWeightMedium,
};
}
const SelectBoxMultiple = ({formik, id, defaultValue}) => {
const theme = useTheme();
const [personName, setPersonName] = useState(defaultValue || []);
useEffect(() => {
defaultValue.forEach((value, index) => {
formik.setFieldValue(`${id}[${index}]`, value || '');
});
}, []);
const handleChange = (event) => {
const {
target: {value},
} = event;
const selectedValues = typeof value === 'string' ? value.split(',').filter(item => item.trim() !== '') : value;
formik.setFieldValue(id, []);
if (selectedValues.length === 0) {
setPersonName([]);
formik.setFieldValue(id, []);
} else {
setPersonName(selectedValues);
selectedValues.forEach((selectedValue, index) => {
formik.setFieldValue(`${id}[${index}]`, selectedValue);
});
}
};
return (
<>
<FormControl sx={{width: '100%'}}>
<InputLabel id={id}>انتخاب</InputLabel>
<Select
id={id}
multiple
value={personName}
onChange={handleChange}
input={<OutlinedInput label="Chip"/>}
renderValue={(selected) => (
<Box sx={{display: 'flex', flexWrap: 'wrap', gap: 0.5}}>
{selected.map((value) => (
<Chip key={value} label={value}/>
))}
</Box>
)}
MenuProps={MenuProps}
sx={{
"&.MuiSelect-select": {
minWidth: 0,
maxWidth: '100%',
overflow: 'hidden',
},
}}
>
{names.map((name) => (
<MenuItem
key={name}
value={name}
style={getStyles(name, personName, theme)}
>
{name}
</MenuItem>
))}
</Select>
</FormControl>
</>
);
};
export default SelectBoxMultiple;

51
src/components/TextFieldWithFnBox.jsx
View File

@@ -1,51 +0,0 @@
import {IconButton, Paper, TextField} from '@mui/material';
import ArtTrackIcon from '@mui/icons-material/ArtTrack';
import {useEffect, useState} from "react";
import FilterBox from "@/components/FilterBox";
const TextFieldWithFnBox = ({formik, id , header, defaultValue, defaultFilter , columnFilterModeOptions ,onSelectFilter}) => {
const [anchorEl, setAnchorEl] = useState(null);
const [open, setOpen] = useState(false);
useEffect(() => {
formik.setFieldValue(id, defaultValue || '');
}, []);
const handleClick = (event) => {
setOpen((prevOpen) => !prevOpen);
setAnchorEl(anchorEl ? null : event.currentTarget);
};
const handleClose = () => {
setOpen(false);
setAnchorEl(null);
};
return (
<>
<TextField
name={id}
label={header}
id={id}
onChange={formik.handleChange}
fullWidth
value={formik.values[id]}
margin="normal"
InputProps={{
endAdornment: (
<IconButton onClick={handleClick}>
<ArtTrackIcon />
</IconButton>
)
}}
sx={{
position: 'relative'
}}
/>
<FilterBox anchorEl={anchorEl} open={open} handleClose={handleClose} columnFilterModeOptions={columnFilterModeOptions} onSelectFilter={onSelectFilter} defaultFilter={defaultFilter}/>
</>
);
};
export default TextFieldWithFnBox;

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;