MRT logoMaterial React Table

Virtualized Example

Material React Table has a built-in virtualization features (via @tanstack/react-virtual) that allows you to render a large number of rows or columns without major performance issues that you would normally see with a large number of DOM elements.

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.

More Examples









1OnieAngelBergnaumEulah39@gmail.com(981) 257-9255514 Cherry Tree Close28802East Pietroton
2MagaliHobartGoldnerFinn_Langosh@gmail.com1-530-387-1699 x0479735 Hoeger Wall00805-1631Rempelland
3MaritzaAsiaLubowitzVivien.Rath63@gmail.com896-585-3663 x66082988 Klein Hill24565-8199West Jairofield
4RosarioMafaldaBogisichAlverta.Connelly56@hotmail.com1-204-597-9394 x1315111 Hagenes Overpass15685-0109Tabithafield
5SusanUniqueAufderharCatherine.Marvin38@gmail.com315-321-9763 x3267380 Cumberland Street36966Rocklin
6FletaProvidenciLakinVivienne_Haley40@gmail.com(886) 575-0812 x707671515 E Jackson Street52879-2555East Karsonmouth
7AnaisSincereBoehmAlfonzo_Predovic@gmail.com358.212.1321 x76371625 Bergstrom Knoll65841Edmond
8AlvertaOzellaHodkiewiczMatilde44@gmail.com230.722.3337 x6463531 Konopelski Inlet36358-5008Denesikworth
9PaxtonLisandroZemlakDarion.Koelpin83@gmail.com1-826-360-9222 x31636932 Greenfelder Fords46818-2852Port Douglasbury
10FidelJadenWisozkFredrick.Ernser25@gmail.com904.414.6442715 Cade Bridge77775Llewellynfurt
11RashadClovisBayerNathanael99@yahoo.com958-750-3100 x23985431 Kevon Oval07958Lake Wilson
12KimberlyKeenanGoldnerCathy.Haag@hotmail.com492.298.0659 x335403904 Selina Creek90064Salinas
13LillianMitchelCronin-MarvinEra55@gmail.com927.649.0461 x986412 Joesph Union51447-6131Borerberg
14JosefinaEsmeraldaCummings-JonesGeo98@gmail.com(389) 442-91962809 Willms Pine63372-0024Predovicstad
15EleanoraTatumEmardAxel.Volkman@yahoo.com756-235-4233 x210021295 Cathy Heights34663-2921Genovevaview
16CrystelOceaneFadelFlossie.Walter@yahoo.com363.982.5225794 Hegmann Bypass37181-7404New Goldenmouth
17RamonWilfredoMurazikRon62@yahoo.com1-890-421-681475557 Nitzsche Springs17491-7816O'Reillyfurt

Source Code

1import { useEffect, useMemo, useRef, useState } from 'react';
2import {
3 MaterialReactTable,
4 useMaterialReactTable,
5 type MRT_ColumnDef,
6 type MRT_SortingState,
7 type MRT_RowVirtualizer,
8} from 'material-react-table';
9import { makeData, type Person } from './makeData';
10
11const Example = () => {
12 const columns = useMemo<MRT_ColumnDef<Person>[]>(
13 //column definitions...
90 );
91
92 //optionally access the underlying virtualizer instance
93 const rowVirtualizerInstanceRef = useRef<MRT_RowVirtualizer>(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 const table = useMaterialReactTable({
116 columns,
117 data, //10,000 rows
118 defaultDisplayColumn: { enableResizing: true },
119 enableBottomToolbar: false,
120 enableColumnResizing: true,
121 enableColumnVirtualization: true,
122 enableGlobalFilterModes: true,
123 enablePagination: false,
124 enableColumnPinning: true,
125 enableRowNumbers: true,
126 enableRowVirtualization: true,
127 muiTableContainerProps: { sx: { maxHeight: '600px' } },
128 onSortingChange: setSorting,
129 state: { isLoading, sorting },
130 rowVirtualizerInstanceRef, //optional
131 rowVirtualizerOptions: { overscan: 5 }, //optionally customize the row virtualizer
132 columnVirtualizerOptions: { overscan: 2 }, //optionally customize the column virtualizer
133 });
134
135 return <MaterialReactTable table={table} />;
136};
137
138export default Example;
139

View Extra Storybook Examples