105 lines
3.0 KiB
JavaScript
105 lines
3.0 KiB
JavaScript
"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;
|
|
|