Material React Table

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