1import { useMemo } from 'react';
2import {
3 MaterialReactTable,
4 useMaterialReactTable,
5 type MRT_ColumnDef,
6} from 'material-react-table';
7
8
9type Person = {
10 name: {
11 firstName: string;
12 lastName: string;
13 };
14 address: string;
15 city: string;
16 state: string;
17};
18
19
20const data: Person[] = [
21 {
22 name: {
23 firstName: 'John',
24 lastName: 'Doe',
25 },
26 address: '261 Erdman Ford',
27 city: 'East Daphne',
28 state: 'Kentucky',
29 },
30 {
31 name: {
32 firstName: 'Jane',
33 lastName: 'Doe',
34 },
35 address: '769 Dominic Grove',
36 city: 'Columbus',
37 state: 'Ohio',
38 },
39 {
40 name: {
41 firstName: 'Joe',
42 lastName: 'Doe',
43 },
44 address: '566 Brakus Inlet',
45 city: 'South Linda',
46 state: 'West Virginia',
47 },
48 {
49 name: {
50 firstName: 'Kevin',
51 lastName: 'Vandy',
52 },
53 address: '722 Emie Stream',
54 city: 'Lincoln',
55 state: 'Nebraska',
56 },
57 {
58 name: {
59 firstName: 'Joshua',
60 lastName: 'Rolluffs',
61 },
62 address: '32188 Larkin Turnpike',
63 city: 'Omaha',
64 state: 'Nebraska',
65 },
66];
67
68const Example = () => {
69
70 const columns = useMemo<MRT_ColumnDef<Person>[]>(
71 () => [
72 {
73 accessorKey: 'name.firstName',
74 header: 'First Name',
75 size: 150,
76 },
77 {
78 accessorKey: 'name.lastName',
79 header: 'Last Name',
80 size: 150,
81 },
82 {
83 accessorKey: 'address',
84 header: 'Address',
85 size: 200,
86 },
87 {
88 accessorKey: 'city',
89 header: 'City',
90 size: 150,
91 },
92 {
93 accessorKey: 'state',
94 header: 'State',
95 size: 150,
96 },
97 ],
98 [],
99 );
100
101 const table = useMaterialReactTable({
102 columns,
103 data,
104 });
105
106 return <MaterialReactTable table={table} />;
107};
108
109export default Example;
110
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4