/
TS.tsx
102 lines (95 loc) · 2.08 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
import { useMemo, useState } from 'react';
import {
MaterialReactTable,
useMaterialReactTable,
type MRT_ColumnDef,
type MRT_RowSelectionState,
} from 'material-react-table';
//data definitions...
interface Person {
userId: string;
firstName: string;
lastName: string;
age: number;
address: string;
city: string;
state: string;
}
//end
const data = [
//data definitions...
{
userId: '3f25309c-8fa1-470f-811e-cdb082ab9017', //we'll use this as a unique row id
firstName: 'Dylan',
lastName: 'Murray',
age: 22,
address: '261 Erdman Ford',
city: 'East Daphne',
state: 'Kentucky',
},
{
userId: 'be731030-df83-419c-b3d6-9ef04e7f4a9f',
firstName: 'Raquel',
lastName: 'Kohler',
age: 18,
address: '769 Dominic Grove',
city: 'Columbus',
state: 'Ohio',
},
//end
];
const Example = () => {
const columns = useMemo<MRT_ColumnDef<Person>[]>(
//column definitions...
() => [
{
accessorKey: 'firstName',
header: 'First Name',
},
{
accessorKey: 'lastName',
header: 'Last Name',
},
{
accessorKey: 'age',
header: 'Age',
},
{
accessorKey: 'address',
header: 'Address',
},
{
accessorKey: 'city',
header: 'City',
},
{
accessorKey: 'state',
header: 'State',
},
],
[],
//end
);
const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
const table = useMaterialReactTable({
columns,
data,
getRowId: (row) => row.userId,
muiTableBodyRowProps: ({ row }) => ({
//implement row selection click events manually
onClick: () =>
setRowSelection((prev) => ({
...prev,
[row.id]: !prev[row.id], //this is a simple toggle implementation
})),
selected: rowSelection[row.id],
sx: {
cursor: 'pointer',
},
}),
onRowSelectionChange: setRowSelection,
state: { rowSelection },
});
return <MaterialReactTable table={table} />;
};
export default Example;