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 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.
1import React, { useEffect, useMemo, useRef, useState } from 'react';2import {3 MaterialReactTable,4 type MRT_ColumnDef,5 type MRT_SortingState,6 type MRT_Virtualizer,7} from 'material-react-table';8import { makeData, type Person } from './makeData';910const Example = () => {11 const columns = useMemo<MRT_ColumnDef<Person>[]>(12 //column definitions...89 );9091 //optionally access the underlying virtualizer instance92 const rowVirtualizerInstanceRef =93 useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);9495 const [data, setData] = useState<Person[]>([]);96 const [isLoading, setIsLoading] = useState(true);97 const [sorting, setSorting] = useState<MRT_SortingState>([]);9899 useEffect(() => {100 if (typeof window !== 'undefined') {101 setData(makeData(10_000));102 setIsLoading(false);103 }104 }, []);105106 useEffect(() => {107 //scroll to the top of the table when the sorting changes108 try {109 rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);110 } catch (error) {111 console.error(error);112 }113 }, [sorting]);114115 return (116 <MaterialReactTable117 columns={columns}118 data={data} //10,000 rows119 defaultDisplayColumn={{ enableResizing: true }}120 enableBottomToolbar={false}121 enableColumnResizing122 enableColumnVirtualization123 enableGlobalFilterModes124 enablePagination={false}125 enablePinning126 enableRowNumbers127 enableRowVirtualization128 muiTableContainerProps={{ sx: { maxHeight: '600px' } }}129 onSortingChange={setSorting}130 state={{ isLoading, sorting }}131 rowVirtualizerInstanceRef={rowVirtualizerInstanceRef} //optional132 rowVirtualizerProps={{ overscan: 5 }} //optionally customize the row virtualizer133 columnVirtualizerProps={{ overscan: 2 }} //optionally customize the column virtualizer134 />135 );136};137138//virtualizerInstanceRef was renamed to rowVirtualizerInstanceRef in v1.5.0139//virtualizerProps was renamed to rowVirtualizerProps in v1.5.0140141export default Example;142
View Extra Storybook Examples