Material React Table

1import React, { useMemo } from 'react';
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3
4//example data type
5type Person = {
6  name: {
7    firstName: string;
8    lastName: string;
9  };
10  address: string;
11  city: string;
12  state: string;
13};
14
15//nested data is ok, see accessorKeys in ColumnDef below
16const data: Person[] = [
17  {
18    name: {
19      firstName: 'John',
20      lastName: 'Doe',
21    },
22    address: '261 Erdman Ford',
23    city: 'East Daphne',
24    state: 'Kentucky',
25  },
26  {
27    name: {
28      firstName: 'Jane',
29      lastName: 'Doe',
30    },
31    address: '769 Dominic Grove',
32    city: 'Columbus',
33    state: 'Ohio',
34  },
35  {
36    name: {
37      firstName: 'Joe',
38      lastName: 'Doe',
39    },
40    address: '566 Brakus Inlet',
41    city: 'South Linda',
42    state: 'West Virginia',
43  },
44  {
45    name: {
46      firstName: 'Kevin',
47      lastName: 'Vandy',
48    },
49    address: '722 Emie Stream',
50    city: 'Lincoln',
51    state: 'Nebraska',
52  },
53  {
54    name: {
55      firstName: 'Joshua',
56      lastName: 'Rolluffs',
57    },
58    address: '32188 Larkin Turnpike',
59    city: 'Omaha',
60    state: 'Nebraska',
61  },
62];
63
64const Example = () => {
65  //should be memoized or stable
66  const columns = useMemo<MRT_ColumnDef<Person>[]>(
67    () => [
68      {
69        accessorKey: 'name.firstName', //access nested data with dot notation
70        header: 'First Name',
71        size: 150,
72      },
73      {
74        accessorKey: 'name.lastName',
75        header: 'Last Name',
76        size: 150,
77      },
78      {
79        accessorKey: 'address', //normal accessorKey
80        header: 'Address',
81        size: 200,
82      },
83      {
84        accessorKey: 'city',
85        header: 'City',
86        size: 150,
87      },
88      {
89        accessorKey: 'state',
90        header: 'State',
91        size: 150,
92      },
93    ],
94    [],
95  );
96
97  return <MaterialReactTable columns={columns} data={data} />;
98};
99
100export default Example;
101