Material React Table

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