Row Virtualization in Material React Table Example

Row Virtualization Example

Material React Table has a built-in row virtualization feature (via @tanstack/react-virual) that allows you to render a large number of rows without major performance issues that you would normally see with a large number of DOM elements.

Try out the performance of the table below with 10,000 rows! Filtering, Search, and Sorting also maintain usable performance.

Be sure to also check out the full virtualization feature guide docs to learn about both Row and Column Virtualization.

NOTE: You should only enable row virtualization if you have a large number of rows or columns. Depending on the size of the table, if you are rendering fewer than a couple dozen rows at a time, you will actually just be adding extra overhead to the table renders. Virtualization only becomes necessary when you have over 50 rows or so at the same time with no pagination or dozens of columns.

More Examples

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

Drop to group by

#	First Name	Middle Name	Last Name	Email Address	Address	Zip Code	City	State	Country

Source Code

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

View Extra Storybook Examples