MRT logoMaterial React Table

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 SandboxOpen on GitHub

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...
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