/
TS.tsx
125 lines (121 loc) · 3.55 KB
/
TS.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import {
MRT_GlobalFilterTextField,
MRT_TableBodyCellValue,
MRT_TablePagination,
MRT_ToolbarAlertBanner,
flexRender,
type MRT_ColumnDef,
useMaterialReactTable,
} from 'material-react-table';
import {
Box,
Stack,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Typography,
} from '@mui/material';
import { type Person, data } from './makeData';
const columns: MRT_ColumnDef<Person>[] = [
{
accessorKey: 'name.firstName',
header: 'First Name',
},
{
accessorKey: 'name.lastName',
header: 'Last Name',
},
{
accessorKey: 'address',
header: 'Address',
},
{
accessorKey: 'city',
header: 'City',
},
{
accessorKey: 'state',
header: 'State',
},
];
const Example = () => {
const table = useMaterialReactTable({
columns,
data, //must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
//MRT display columns can still work, optionally override cell renders with `displayColumnDefOptions`
enableRowSelection: true,
initialState: {
pagination: { pageSize: 5, pageIndex: 0 },
showGlobalFilter: true,
},
//customize the MRT components
muiPaginationProps: {
rowsPerPageOptions: [5, 10, 15],
variant: 'outlined',
},
paginationDisplayMode: 'pages',
});
return (
<Stack sx={{ m: '2rem 0' }}>
<Typography variant="h4">My Custom Headless Table</Typography>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
{/**
* Use MRT components along side your own markup.
* They just need the `table` instance passed as a prop to work!
*/}
<MRT_GlobalFilterTextField table={table} />
<MRT_TablePagination table={table} />
</Box>
{/* Using Vanilla Material-UI Table components here */}
<TableContainer>
<Table>
{/* Use your own markup, customize however you want using the power of TanStack Table */}
<TableHead>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableCell align="center" variant="head" key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.Header ??
header.column.columnDef.header,
header.getContext(),
)}
</TableCell>
))}
</TableRow>
))}
</TableHead>
<TableBody>
{table.getRowModel().rows.map((row, rowIndex) => (
<TableRow key={row.id} selected={row.getIsSelected()}>
{row.getVisibleCells().map((cell, _columnIndex) => (
<TableCell align="center" variant="body" key={cell.id}>
{/* Use MRT's cell renderer that provides better logic than flexRender */}
<MRT_TableBodyCellValue
cell={cell}
table={table}
staticRowIndex={rowIndex} //just for batch row selection to work
/>
</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<MRT_ToolbarAlertBanner stackAlertBanner table={table} />
</Stack>
);
};
export default Example;