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

Drop to group by

#	First Name	Middle Name

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        size: 250,
35      },
36      {
37        accessorKey: 'address',
38        header: 'Address',
39        size: 300,
40      },
41      {
42        accessorKey: 'zipCode',
43        header: 'Zip Code',
44      },
45      {
46        accessorKey: 'city',
47        header: 'City',
48        size: 220,
49      },
50      {
51        accessorKey: 'state',
52        header: 'State',
53      },
54      {
55        accessorKey: 'country',
56        header: 'Country',
57        size: 350,
58      },
59      {
60        accessorKey: 'petName',
61        header: 'Pet Name',
62      },
63      {
64        accessorKey: 'age',
65        header: 'Age',
66      },
67      {
68        accessorKey: 'salary',
69        header: 'Salary',
70      },
71      {
72        accessorKey: 'dateOfBirth',
73        header: 'Date of Birth',
74      },
75      {
76        accessorKey: 'dateOfJoining',
77        header: 'Date of Joining',
78      },
79      {
80        accessorKey: 'isActive',
81        header: 'Is Active',
82      },
83    ],
84    [],
85    
86  );
87
88  //optionally access the underlying virtualizer instance
89  const rowVirtualizerInstanceRef =
90    useRef<Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);
91
92  const [data, setData] = useState<Person[]>([]);
93  const [isLoading, setIsLoading] = useState(true);
94  const [sorting, setSorting] = useState<SortingState>([]);
95
96  useEffect(() => {
97    if (typeof window !== 'undefined') {
98      setData(makeData(10_000));
99      setIsLoading(false);
100    }
101  }, []);
102
103  useEffect(() => {
104    //scroll to the top of the table when the sorting changes
105    rowVirtualizerInstanceRef.current?.scrollToIndex(0);
106  }, [sorting]);
107
108  return (
109    <MaterialReactTable
110      columns={columns}
111      data={data} //10,000 rows
112      enableBottomToolbar={false}
113      enableColumnVirtualization
114      enableGlobalFilterModes
115      enablePagination={false}
116      enablePinning
117      enableRowNumbers
118      enableRowVirtualization
119      muiTableContainerProps={{ sx: { maxHeight: '600px' } }}
120      onSortingChange={setSorting}
121      state={{ isLoading, sorting }}
122      rowVirtualizerInstanceRef={rowVirtualizerInstanceRef} //optional
123      rowVirtualizerProps={{ overscan: 5 }} //optionally customize the row virtualizer
124      columnVirtualizerProps={{ overscan: 2 }} //optionally customize the column virtualizer
125    />
126  );
127};
128
129//virtualizerInstanceRef was renamed to rowVirtualizerInstanceRef in v1.5.0
130//virtualizerProps was renamed to rowVirtualizerProps in v1.5.0
131
132export default Example;
133

View Extra Storybook Examples