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 100 rows or so at the same time with no pagination.

Demo

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, {
3  MRT_ColumnDef,
4  Virtualizer,
5} from 'material-react-table';
6import { SortingState } from '@tanstack/react-table';
7import { makeData, Person } from './makeData';
8
9const Example: FC = () => {
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: 150,
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      },
37      {
38        accessorKey: 'address',
39        header: 'Address',
40      },
41      {
42        accessorKey: 'zipCode',
43        header: 'Zip Code',
44      },
45      {
46        accessorKey: 'city',
47        header: 'City',
48      },
49      {
50        accessorKey: 'state',
51        header: 'State',
52      },
53      {
54        accessorKey: 'country',
55        header: 'Country',
56      },
57      {
58        accessorKey: 'petName',
59        header: 'Pet Name',
60      },
61      {
62        accessorKey: 'age',
63        header: 'Age',
64      },
65    ],
66    [],
67    
68  );
69
70  //optionally access the underlying virtualizer instance
71  const virtualizerInstanceRef = useRef<Virtualizer>(null);
72
73  const [data, setData] = useState<Person[]>([]);
74  const [isLoading, setIsLoading] = useState(true);
75  const [sorting, setSorting] = useState<SortingState>([]);
76
77  useEffect(() => {
78    if (typeof window !== 'undefined') {
79      setData(makeData(10_000));
80      setIsLoading(false);
81    }
82  }, []);
83
84  useEffect(() => {
85    if (virtualizerInstanceRef.current) {
86      //scroll to the top of the table when the sorting changes
87      virtualizerInstanceRef.current.scrollToIndex(0);
88    }
89  }, [sorting]);
90
91  return (
92    <MaterialReactTable
93      columns={columns}
94      data={data} //10,000 rows
95      enableBottomToolbar={false}
96      enableGlobalFilterModes
97      enablePagination={false}
98      enableRowNumbers
99      enableRowVirtualization
100      initialState={{ density: 'compact' }}
101      muiTableContainerProps={{ sx: { maxHeight: '600px' } }}
102      onSortingChange={setSorting}
103      state={{ isLoading, sorting }}
104      virtualizerInstanceRef={virtualizerInstanceRef} //optional
105      virtualizerProps={{ overscan: 20 }} //optionally customize the virtualizer
106    />
107  );
108};
109
110export default Example;
111

View Extra Storybook Examples