Material React Table

1import { useEffect, useMemo, useRef, useState } from 'react';
2import {
3  MaterialReactTable,
4  type MRT_ColumnDef,
5  type MRT_SortingState,
6  type MRT_Virtualizer,
7} from 'material-react-table';
8import { makeData, type Person } from './makeData';
9
10const Example = () => {
11  const columns = useMemo<MRT_ColumnDef<Person>[]>(
12    //column definitions...
13    () => [
14      {
15        accessorKey: 'firstName',
16        header: 'First Name',
17        size: 150,
18      },
19      {
20        accessorKey: 'middleName',
21        header: 'Middle Name',
22        size: 150,
23      },
24      {
25        accessorKey: 'lastName',
26        header: 'Last Name',
27        size: 150,
28      },
29      {
30        accessorKey: 'email',
31        header: 'Email Address',
32        size: 300,
33      },
34      {
35        accessorKey: 'address',
36        header: 'Address',
37      },
38      {
39        accessorKey: 'zipCode',
40        header: 'Zip Code',
41      },
42      {
43        accessorKey: 'city',
44        header: 'City',
45      },
46      {
47        accessorKey: 'state',
48        header: 'State',
49      },
50      {
51        accessorKey: 'country',
52        header: 'Country',
53      },
54    ],
55    [],
56    
57  );
58
59  //optionally access the underlying virtualizer instance
60  const rowVirtualizerInstanceRef =
61    useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(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  return (
84    <MaterialReactTable
85      columns={columns}
86      data={data} //10,000 rows
87      enableBottomToolbar={false}
88      enableGlobalFilterModes
89      enablePagination={false}
90      enableRowNumbers
91      enableRowVirtualization
92      muiTableContainerProps={{ sx: { maxHeight: '600px' } }}
93      onSortingChange={setSorting}
94      state={{ isLoading, sorting }}
95      rowVirtualizerInstanceRef={rowVirtualizerInstanceRef} //optional
96      rowVirtualizerOptions={{ overscan: 8 }} //optionally customize the virtualizer
97    />
98  );
99};
100
101//virtualizerInstanceRef was renamed to rowVirtualizerInstanceRef in v1.5.0
102//virtualizerProps was renamed to rowVirtualizerOptions in v1.5.0
103
104export default Example;
105