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









1DejahSelmerSwaniawskiMaryjane_Beatty93@gmail.com1-524-959-3682 x479368789 Maida Squares18090-0478East Modestatown
2JaydeBennieSchmittBraeden.Mosciski64@hotmail.com420.651.2731 x513763 Garrett Grove57561North Artport
3VedaRobbParisianAdolf.Prohaska@yahoo.com427-313-0547 x367902 Grant Grove55328Devanworth
4AndreTristianHuelHeather_Cruickshank@gmail.com741.318.3076 x91693550 Bella Crossroad35397West Shayna
5SalvatoreAngieKossHilda.Berge@hotmail.com459-491-9294537 Cherry Tree Close84661Hellerberg
6NoemieAllyKuhlmanNovella81@yahoo.com1-749-327-6265 x2791345423 Stiedemann Rapids94716East Alberta
7RandiChesterMohrKennith.Reinger@gmail.com(553) 975-2463 x3869771 Koss Mount65157-5916Hoegerborough
8TerryElwinVolkmanPaxton.Romaguera@hotmail.com1-844-990-5841 x30016321 Dooley Hills45124-1842South Anselland
9RossDaltonTerryStone.Kulas@hotmail.com256-965-115722516 Doyle Heights01395Priceburgh
10BriceWendySauerGerry.Heller35@hotmail.com816-977-83495493 S Water Street16326O'Keefeton
11BeatriceAllisonDenesikJulia.Barton99@hotmail.com735.441.7981 x052788 Witting Junctions19464-7572East Mavismouth
12MadalineMargeBlickSusanna30@yahoo.com1-358-344-162324834 Vivien Key64477-2767Roweburgh
13AnaAngieWiegandAndre44@gmail.com(648) 729-1112 x139789961 Mallory Harbors05358-6651Leonorastad
14RusselAlexaneFriesenLizeth5@yahoo.com737.413.142584362 The Poplars40943Lake William
15VivienneStephenReichelAbdiel98@hotmail.com414-205-056477724 Ida Highway60011-8653Oakland
16NolaAglaeGerholdAsa97@yahoo.com518-745-3157 x08718589 Cali Ridges22677-6014Robertport

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