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: 170,
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: 'phoneNumber',
36        header: 'Phone Number',
37        size: 250,
38      },
39      {
40        accessorKey: 'address',
41        header: 'Address',
42        size: 300,
43      },
44      {
45        accessorKey: 'zipCode',
46        header: 'Zip Code',
47      },
48      {
49        accessorKey: 'city',
50        header: 'City',
51        size: 220,
52      },
53      {
54        accessorKey: 'state',
55        header: 'State',
56      },
57      {
58        accessorKey: 'country',
59        header: 'Country',
60        size: 350,
61      },
62      {
63        accessorKey: 'petName',
64        header: 'Pet Name',
65      },
66      {
67        accessorKey: 'age',
68        header: 'Age',
69      },
70      {
71        accessorKey: 'salary',
72        header: 'Salary',
73      },
74      {
75        accessorKey: 'dateOfBirth',
76        header: 'Date of Birth',
77      },
78      {
79        accessorKey: 'dateOfJoining',
80        header: 'Date of Joining',
81      },
82      {
83        accessorKey: 'isActive',
84        header: 'Is Active',
85      },
86    ],
87    [],
88    
89  );
90
91  //optionally access the underlying virtualizer instance
92  const rowVirtualizerInstanceRef =
93    useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(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  return (
116    <MaterialReactTable
117      columns={columns}
118      data={data} //10,000 rows
119      defaultDisplayColumn={{ enableResizing: true }}
120      enableBottomToolbar={false}
121      enableColumnResizing
122      enableColumnVirtualization
123      enableGlobalFilterModes
124      enablePagination={false}
125      enableColumnPinning
126      enableRowNumbers
127      enableRowVirtualization
128      muiTableContainerProps={{ sx: { maxHeight: '600px' } }}
129      onSortingChange={setSorting}
130      state={{ isLoading, sorting }}
131      rowVirtualizerInstanceRef={rowVirtualizerInstanceRef} //optional
132      rowVirtualizerOptions={{ overscan: 5 }} //optionally customize the row virtualizer
133      columnVirtualizerOptions={{ overscan: 2 }} //optionally customize the column virtualizer
134    />
135  );
136};
137
138//virtualizerInstanceRef was renamed to rowVirtualizerInstanceRef in v1.5.0
139//virtualizerProps was renamed to rowVirtualizerOptions in v1.5.0
140
141export default Example;
142