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

Source Code

1import React, { 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

View Extra Storybook Examples