Material React Table

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7
8//example data type
9type Person = {
10  name: {
11    firstName: string;
12    lastName: string;
13  };
14  address: string;
15  city: string;
16  state: string;
17};
18
19//nested data is ok, see accessorKeys in ColumnDef below
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  //should be memoized or stable
70  const columns = useMemo<MRT_ColumnDef<Person>[]>(
71    () => [
72      {
73        accessorKey: 'name.firstName', //access nested data with dot notation
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', //normal accessorKey
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, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
104  });
105
106  return <MaterialReactTable table={table} />;
107};
108
109export default Example;
110