Material React Table

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7
8export type Employee = {
9  id: string;
10  firstName: string;
11  lastName: string;
12  email: string;
13  state: string;
14  managerId: string | null;
15};
16
17//flat data that TanStack Table's getSubRows() function will parse into a tree
18export const data: Employee[] = [
19  {
20    id: '9s41rp',
21    firstName: 'Kelvin',
22    lastName: 'Langosh',
23    email: 'Jerod14@hotmail.com',
24    state: 'Ohio',
25    managerId: '08m6rx',
26  },
27  {
28    id: '08m6rx',
29    firstName: 'Molly',
30    lastName: 'Purdy',
31    email: 'Hugh.Dach79@hotmail.com',
32    state: 'Rhode Island',
33    managerId: '5ymtrc',
34  },
35  {
36    id: '5ymtrc',
37    firstName: 'Henry',
38    lastName: 'Lynch',
39    email: 'Camden.Macejkovic@yahoo.com',
40    state: 'California',
41    managerId: null, //top of a tree
42  },
43  {
44    id: 'ek5b97',
45    firstName: 'Glenda',
46    lastName: 'Douglas',
47    email: 'Eric0@yahoo.com',
48    state: 'Montana',
49    managerId: '08m6rx',
50  },
51  {
52    id: 'xxtydd',
53    firstName: 'Leone',
54    lastName: 'Williamson',
55    email: 'Ericka_Mueller52@yahoo.com',
56    state: 'Colorado',
57    managerId: '08m6rx',
58  },
59  {
60    id: 'wzxj9m',
61    firstName: 'Mckenna',
62    lastName: 'Friesen',
63    email: 'Veda_Feeney@yahoo.com',
64    state: 'New York',
65    managerId: null, //top of a tree
66  },
67  {
68    id: '21dwtz',
69    firstName: 'Wyman',
70    lastName: 'Jast',
71    email: 'Melvin.Pacocha@yahoo.com',
72    state: 'Montana',
73    managerId: 'wzxj9m',
74  },
75  {
76    id: 'o8oe4k',
77    firstName: 'Janick',
78    lastName: 'Willms',
79    email: 'Delfina12@gmail.com',
80    state: 'Nebraska',
81    managerId: 'wzxj9m',
82  },
83];
84
85const Example = () => {
86  const columns = useMemo<MRT_ColumnDef<Employee>[]>(
87    //column definitions...
88    () => [
89      {
90        accessorKey: 'firstName',
91        header: 'First Name',
92      },
93      {
94        accessorKey: 'lastName',
95        header: 'Last Name',
96      },
97
98      {
99        accessorKey: 'email',
100        header: 'Email',
101      },
102      {
103        accessorKey: 'state',
104        enableColumnOrdering: false,
105        header: 'State',
106      },
107    ],
108    [],
109    
110  );
111
112  //only root rows with no managerId
113  const rootData = useMemo(() => data.filter((r) => !r.managerId), [data]);
114
115  const table = useMaterialReactTable({
116    columns,
117    data: rootData,
118    enableExpanding: true,
119    //note: performance of this example should be improved with hash maps. This is currently 0(n^2)
120    getSubRows: (row) => data.filter((r) => r.managerId === row.id),
121  });
122
123  return <MaterialReactTable table={table} />;
124};
125
126export default Example;
127