Virtualization in Material React Table Example

Virtualized Example

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

Try out the performance of the table below with 10,000 rows and over a dozen columns! 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.

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

Drop to group by

#	First Name	Middle Name

Source Code

1import React, { useEffect, useMemo, useRef, useState } from 'react';
2import MaterialReactTable, {
3  MRT_ColumnDef,
4  MRT_SortingState,
5  MRT_Virtualizer,
6} from 'material-react-table';
7import { makeData, Person } from './makeData';
8
9const Example = () => {
10  const columns = useMemo<MRT_ColumnDef<Person>[]>(
11    //column definitions...
12    () => [
13      {
14        accessorKey: 'firstName',
15        header: 'First Name',
16        size: 150,
17      },
18      {
19        accessorKey: 'middleName',
20        header: 'Middle Name',
21        size: 170,
22      },
23      {
24        accessorKey: 'lastName',
25        header: 'Last Name',
26        size: 150,
27      },
28      {
29        accessorKey: 'email',
30        header: 'Email Address',
31        size: 300,
32      },
33      {
34        accessorKey: 'phoneNumber',
35        header: 'Phone Number',
36        size: 250,
37      },
38      {
39        accessorKey: 'address',
40        header: 'Address',
41        size: 300,
42      },
43      {
44        accessorKey: 'zipCode',
45        header: 'Zip Code',
46      },
47      {
48        accessorKey: 'city',
49        header: 'City',
50        size: 220,
51      },
52      {
53        accessorKey: 'state',
54        header: 'State',
55      },
56      {
57        accessorKey: 'country',
58        header: 'Country',
59        size: 350,
60      },
61      {
62        accessorKey: 'petName',
63        header: 'Pet Name',
64      },
65      {
66        accessorKey: 'age',
67        header: 'Age',
68      },
69      {
70        accessorKey: 'salary',
71        header: 'Salary',
72      },
73      {
74        accessorKey: 'dateOfBirth',
75        header: 'Date of Birth',
76      },
77      {
78        accessorKey: 'dateOfJoining',
79        header: 'Date of Joining',
80      },
81      {
82        accessorKey: 'isActive',
83        header: 'Is Active',
84      },
85    ],
86    [],
87    
88  );
89
90  //optionally access the underlying virtualizer instance
91  const rowVirtualizerInstanceRef =
92    useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);
93
94  const [data, setData] = useState<Person[]>([]);
95  const [isLoading, setIsLoading] = useState(true);
96  const [sorting, setSorting] = useState<MRT_SortingState>([]);
97
98  useEffect(() => {
99    if (typeof window !== 'undefined') {
100      setData(makeData(10_000));
101      setIsLoading(false);
102    }
103  }, []);
104
105  useEffect(() => {
106    //scroll to the top of the table when the sorting changes
107    rowVirtualizerInstanceRef.current?.scrollToIndex(0);
108  }, [sorting]);
109
110  return (
111    <MaterialReactTable
112      columns={columns}
113      data={data} //10,000 rows
114      defaultDisplayColumn={{ enableResizing: true }}
115      enableBottomToolbar={false}
116      enableColumnResizing
117      enableColumnVirtualization
118      enableGlobalFilterModes
119      enablePagination={false}
120      enablePinning
121      enableRowNumbers
122      enableRowVirtualization
123      muiTableContainerProps={{ sx: { maxHeight: '600px' } }}
124      onSortingChange={setSorting}
125      state={{ isLoading, sorting }}
126      rowVirtualizerInstanceRef={rowVirtualizerInstanceRef} //optional
127      rowVirtualizerProps={{ overscan: 5 }} //optionally customize the row virtualizer
128      columnVirtualizerProps={{ overscan: 2 }} //optionally customize the column virtualizer
129    />
130  );
131};
132
133//virtualizerInstanceRef was renamed to rowVirtualizerInstanceRef in v1.5.0
134//virtualizerProps was renamed to rowVirtualizerProps in v1.5.0
135
136export default Example;
137

View Extra Storybook Examples