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: 170,
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: 'phoneNumber',
37        header: 'Phone Number',
38        size: 250,
39      },
40      {
41        accessorKey: 'address',
42        header: 'Address',
43        size: 300,
44      },
45      {
46        accessorKey: 'zipCode',
47        header: 'Zip Code',
48      },
49      {
50        accessorKey: 'city',
51        header: 'City',
52        size: 220,
53      },
54      {
55        accessorKey: 'state',
56        header: 'State',
57      },
58      {
59        accessorKey: 'country',
60        header: 'Country',
61        size: 350,
62      },
63      {
64        accessorKey: 'petName',
65        header: 'Pet Name',
66      },
67      {
68        accessorKey: 'age',
69        header: 'Age',
70      },
71      {
72        accessorKey: 'salary',
73        header: 'Salary',
74      },
75      {
76        accessorKey: 'dateOfBirth',
77        header: 'Date of Birth',
78      },
79      {
80        accessorKey: 'dateOfJoining',
81        header: 'Date of Joining',
82      },
83      {
84        accessorKey: 'isActive',
85        header: 'Is Active',
86      },
87    ],
88    [],
89    
90  );
91
92  //optionally access the underlying virtualizer instance
93  const rowVirtualizerInstanceRef = useRef<MRT_RowVirtualizer>(null);
94
95  const [data, setData] = useState<Person[]>([]);
96  const [isLoading, setIsLoading] = useState(true);
97  const [sorting, setSorting] = useState<MRT_SortingState>([]);
98
99  useEffect(() => {
100    if (typeof window !== 'undefined') {
101      setData(makeData(10_000));
102      setIsLoading(false);
103    }
104  }, []);
105
106  useEffect(() => {
107    //scroll to the top of the table when the sorting changes
108    try {
109      rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);
110    } catch (error) {
111      console.error(error);
112    }
113  }, [sorting]);
114
115  const table = useMaterialReactTable({
116    columns,
117    data, //10,000 rows
118    defaultDisplayColumn: { enableResizing: true },
119    enableBottomToolbar: false,
120    enableColumnResizing: true,
121    enableColumnVirtualization: true,
122    enableGlobalFilterModes: true,
123    enablePagination: false,
124    enableColumnPinning: true,
125    enableRowNumbers: true,
126    enableRowVirtualization: true,
127    muiTableContainerProps: { sx: { maxHeight: '600px' } },
128    onSortingChange: setSorting,
129    state: { isLoading, sorting },
130    rowVirtualizerInstanceRef, //optional
131    rowVirtualizerOptions: { overscan: 5 }, //optionally customize the row virtualizer
132    columnVirtualizerOptions: { overscan: 2 }, //optionally customize the column virtualizer
133  });
134
135  return <MaterialReactTable table={table} />;
136};
137
138export default Example;
139