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









1EricElyssaMullerElroy.Fay91@yahoo.com842-304-50945093 Mia Circle47521South Jaleelstead
2LoisErnaKeeblerKitty.Armstrong86@hotmail.com651-772-5126 x8085280052 Milford Crossroad99316-0999Palm Beach Gardens
3LaviniaOleWolfEliezer8@yahoo.com792-955-418855320 McDermott Loaf39098-5805Lake Salvatoreton
4MadelynClotildeTerryRogers_Kirlin@gmail.com(789) 898-6791 x830413968 The Limes77816-6042Beershire
5LindsayEvalynJenkinsNora4@yahoo.com980.846.0369 x6973960 Herman Forges56456-9298Rashawnshire
6AurelieJordiBartonDuane82@gmail.com1-593-580-3398 x9051720770 Jerad Heights14351Port Charlotte
7LuisaShakiraJacobsonZoie59@hotmail.com801-925-4703673 Jeremy Fords33653Parisianmouth
8JaceyMadelineRusselDelmer.Hilll56@yahoo.com676.455.3646 x92477004 Colt Circles30630-6081Clydeborough
9GennaroJasonHuelsEzekiel48@gmail.com1-407-226-8839 x522454 Bernier Hollow26104Koelpinberg
10NeldaHayleyShieldsJohann.Fay29@gmail.com559-556-1237 x239916047 Ondricka Mills81737-7995Fort Percy
11DockLeslyHahnLitzy4@gmail.com(769) 676-9833 x577875306 Natalie Ville86423-8470New Marcelo
12DaisyCorbinCummingsDanny92@yahoo.com838.593.81327560 Moen Port10800-9428Hoppeville
13KenyonConstantinHayesFelton.Rosenbaum59@gmail.com(568) 317-8245 x931895403 Schmeler Greens27695-7233Tedhaven
14ZelmaLuciousDickiArielle.Witting86@hotmail.com1-974-216-535032964 Rogahn Well69347-5512South Samantha
15AldenRosalindRogahnGerda.Leuschke@yahoo.com577.970.8956801 7th Street83814-5581North Rahsaanstead
16IsmaelEladioKohlerBerry52@yahoo.com(477) 857-2088 x78101907 Jackson Avenue69441Loyceview

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