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! Filtering, Search, and Sorting also maintain usable performance.

Be sure to also check out the full row virtualization feature guide docs.

NOTE: You should only enable row virtualization if you have a large number of rows. 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.

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

#	First Name	Middle Name	Last Name	Email Address	Phone Number	Address	Zip Code	City	State	Country	Pet Name	Age

Source Code

1import React, { FC, useEffect, useMemo, useRef, useState } from 'react';
2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
3import type { SortingState } from '@tanstack/react-table';
4import type { Virtualizer } from '@tanstack/react-virtual';
5import { makeData, Person } from './makeData';
6
7const Example: FC = () => {
8  const columns = useMemo<MRT_ColumnDef<Person>[]>(
9    //column definitions...
10    () => [
11      {
12        accessorKey: 'firstName',
13        header: 'First Name',
14        size: 150,
15      },
16      {
17        accessorKey: 'middleName',
18        header: 'Middle Name',
19        size: 150,
20      },
21      {
22        accessorKey: 'lastName',
23        header: 'Last Name',
24        size: 150,
25      },
26      {
27        accessorKey: 'email',
28        header: 'Email Address',
29        size: 300,
30      },
31      {
32        accessorKey: 'phoneNumber',
33        header: 'Phone Number',
34      },
35      {
36        accessorKey: 'address',
37        header: 'Address',
38      },
39      {
40        accessorKey: 'zipCode',
41        header: 'Zip Code',
42      },
43      {
44        accessorKey: 'city',
45        header: 'City',
46      },
47      {
48        accessorKey: 'state',
49        header: 'State',
50      },
51      {
52        accessorKey: 'country',
53        header: 'Country',
54      },
55      {
56        accessorKey: 'petName',
57        header: 'Pet Name',
58      },
59      {
60        accessorKey: 'age',
61        header: 'Age',
62      },
63    ],
64    [],
65    
66  );
67
68  //optionally access the underlying virtualizer instance
69  const virtualizerInstanceRef =
70    useRef<Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);
71
72  const [data, setData] = useState<Person[]>([]);
73  const [isLoading, setIsLoading] = useState(true);
74  const [sorting, setSorting] = useState<SortingState>([]);
75
76  useEffect(() => {
77    if (typeof window !== 'undefined') {
78      setData(makeData(10_000));
79      setIsLoading(false);
80    }
81  }, []);
82
83  useEffect(() => {
84    if (virtualizerInstanceRef.current) {
85      //scroll to the top of the table when the sorting changes
86      virtualizerInstanceRef.current.scrollToIndex(0);
87    }
88  }, [sorting]);
89
90  return (
91    <MaterialReactTable
92      columns={columns}
93      data={data} //10,000 rows
94      enableBottomToolbar={false}
95      enableGlobalFilterModes
96      enablePagination={false}
97      enableRowNumbers
98      enableRowVirtualization
99      muiTableContainerProps={{ sx: { maxHeight: '600px' } }}
100      onSortingChange={setSorting}
101      state={{ isLoading, sorting }}
102      virtualizerInstanceRef={virtualizerInstanceRef} //optional
103      virtualizerProps={{ overscan: 8 }} //optionally customize the virtualizer
104    />
105  );
106};
107
108export default Example;
109

View Extra Storybook Examples