Material React Table

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7
8export type Person = {
9  firstName: string;
10  lastName: string;
11  address: string;
12  city: string;
13  state: string;
14  subRows?: Person[]; //Each person can have sub rows of more people
15};
16
17export const data: Person[] = [
18  {
19    firstName: 'Dylan',
20    lastName: 'Murray',
21    address: '261 Erdman Ford',
22    city: 'East Daphne',
23    state: 'Kentucky',
24    subRows: [
25      {
26        firstName: 'Ervin',
27        lastName: 'Reinger',
28        address: '566 Brakus Inlet',
29        city: 'South Linda',
30        state: 'West Virginia',
31        subRows: [
32          {
33            firstName: 'Jordane',
34            lastName: 'Homenick',
35            address: '1234 Brakus Inlet',
36            city: 'South Linda',
37            state: 'West Virginia',
38          },
39          {
40            firstName: 'Jordan',
41            lastName: 'Clarkson',
42            address: '4882 Palm Rd',
43            city: 'San Francisco',
44            state: 'California',
45          },
46        ],
47      },
48      {
49        firstName: 'Brittany',
50        lastName: 'McCullough',
51        address: '722 Emie Stream',
52        city: 'Lincoln',
53        state: 'Nebraska',
54      },
55    ],
56  },
57  {
58    firstName: 'Raquel',
59    lastName: 'Kohler',
60    address: '769 Dominic Grove',
61    city: 'Columbus',
62    state: 'Ohio',
63    subRows: [
64      {
65        firstName: 'Branson',
66        lastName: 'Frami',
67        address: '32188 Larkin Turnpike',
68        city: 'Charleston',
69        state: 'South Carolina',
70      },
71    ],
72  },
73];
74
75const Example = () => {
76  const columns = useMemo<MRT_ColumnDef<Person>[]>(
77    //column definitions...
78    () => [
79      {
80        accessorKey: 'firstName',
81        header: 'First Name',
82      },
83      {
84        accessorKey: 'lastName',
85        header: 'Last Name',
86      },
87
88      {
89        accessorKey: 'address',
90        header: 'Address',
91      },
92      {
93        accessorKey: 'city',
94        header: 'City',
95      },
96
97      {
98        accessorKey: 'state',
99        enableColumnOrdering: false,
100        header: 'State',
101      },
102    ],
103    [],
104    
105  );
106
107  const table = useMaterialReactTable({
108    columns,
109    data,
110    enableExpandAll: false, //hide expand all double arrow in column header
111    enableExpanding: true,
112    filterFromLeafRows: true, //apply filtering to all rows instead of just parent rows
113    initialState: { expanded: true }, //expand all rows by default
114    paginateExpandedRows: false, //When rows are expanded, do not count sub-rows as number of rows on the page towards pagination
115  });
116
117  return <MaterialReactTable table={table} />;
118};
119
120export default Example;
121