Material React Table

1import { useEffect, useMemo, useRef, useState } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6  type MRT_SortingState,
7  type MRT_RowVirtualizer,
8} from 'material-react-table';
9import { makeData, type Person } from './makeData';
10
11const Example = () => {
12  const columns = useMemo<MRT_ColumnDef<Person>[]>(
13    //column definitions...
14    () => [
15      {
16        accessorKey: 'firstName',
17        header: 'First Name',
18        size: 150,
19      },
20      {
21        accessorKey: 'middleName',
22        header: 'Middle Name',
23        size: 150,
24      },
25      {
26        accessorKey: 'lastName',
27        header: 'Last Name',
28        size: 150,
29      },
30      {
31        accessorKey: 'email',
32        header: 'Email Address',
33        size: 300,
34      },
35      {
36        accessorKey: 'address',
37        header: 'Address',
38      },
39      {
40        accessorKey: 'zipCode',
41        header: 'Zip Code',
42      },
43      {
44        accessorKey: 'city',
45        header: 'City',
46      },
47      {
48        accessorKey: 'state',
49        header: 'State',
50      },
51      {
52        accessorKey: 'country',
53        header: 'Country',
54      },
55    ],
56    [],
57    
58  );
59
60  //optionally access the underlying virtualizer instance
61  const rowVirtualizerInstanceRef = useRef<MRT_RowVirtualizer>(null);
62
63  const [data, setData] = useState<Person[]>([]);
64  const [isLoading, setIsLoading] = useState(true);
65  const [sorting, setSorting] = useState<MRT_SortingState>([]);
66
67  useEffect(() => {
68    if (typeof window !== 'undefined') {
69      setData(makeData(10_000));
70      setIsLoading(false);
71    }
72  }, []);
73
74  useEffect(() => {
75    //scroll to the top of the table when the sorting changes
76    try {
77      rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);
78    } catch (error) {
79      console.error(error);
80    }
81  }, [sorting]);
82
83  const table = useMaterialReactTable({
84    columns,
85    data, //10,000 rows
86    enableBottomToolbar: false,
87    enableGlobalFilterModes: true,
88    enablePagination: false,
89    enableRowNumbers: true,
90    enableRowVirtualization: true,
91    muiTableContainerProps: { sx: { maxHeight: '600px' } },
92    onSortingChange: setSorting,
93    state: { isLoading, sorting },
94    rowVirtualizerInstanceRef, //optional
95    rowVirtualizerOptions: { overscan: 5 }, //optionally customize the row virtualizer
96  });
97
98  return <MaterialReactTable table={table} />;
99};
100
101export default Example;
102