MRT logoMaterial React Table

Column Virtualization Example

Material React Table has a built-in column virtualization feature (via @tanstack/react-virtual) that allows you to render a large number of 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 500 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


Open StackblitzOpen Code SandboxOpen on GitHub
1-10 of 10

Source Code

1import { useRef } from 'react';
2import {
3 MaterialReactTable,
4 useMaterialReactTable,
5 type MRT_ColumnVirtualizer,
6} from 'material-react-table';
7import { fakeColumns, fakeData } from './makeData';
9const Example = () => {
10 //optionally access the underlying virtualizer instance
11 const columnVirtualizerInstanceRef = useRef<MRT_ColumnVirtualizer>(null);
13 const table = useMaterialReactTable({
14 columnVirtualizerInstanceRef, //optional
15 columnVirtualizerOptions: { overscan: 4 }, //optionally customize the virtualizer
16 columns: fakeColumns, //500 columns
17 data: fakeData,
18 enableColumnPinning: true,
19 enableColumnResizing: true,
20 enableColumnVirtualization: true,
21 enableRowNumbers: true,
22 });
24 return <MaterialReactTable table={table} />;
27export default Example;

View Extra Storybook Examples