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.
# | First Name 0 | Middle Name 0 | Last Name 0 | Email Address 0 | Phone Number 0 | Address 0 | Zip Code 0 | City 0 | |
---|---|---|---|---|---|---|---|---|---|
1 | Onie | Angel | Bergnaum | Eulah39@gmail.com | (981) 257-9255 | 514 Cherry Tree Close | 28802 | East Pietroton | |
2 | Magali | Hobart | Goldner | Finn_Langosh@gmail.com | 1-530-387-1699 x047 | 9735 Hoeger Wall | 00805-1631 | Rempelland | |
3 | Maritza | Asia | Lubowitz | Vivien.Rath63@gmail.com | 896-585-3663 x6608 | 2988 Klein Hill | 24565-8199 | West Jairofield | |
4 | Rosario | Mafalda | Bogisich | Alverta.Connelly56@hotmail.com | 1-204-597-9394 x1315 | 111 Hagenes Overpass | 15685-0109 | Tabithafield | |
5 | Susan | Unique | Aufderhar | Catherine.Marvin38@gmail.com | 315-321-9763 x3267 | 380 Cumberland Street | 36966 | Rocklin | |
6 | Fleta | Providenci | Lakin | Vivienne_Haley40@gmail.com | (886) 575-0812 x70767 | 1515 E Jackson Street | 52879-2555 | East Karsonmouth | |
7 | Anais | Sincere | Boehm | Alfonzo_Predovic@gmail.com | 358.212.1321 x7637 | 1625 Bergstrom Knoll | 65841 | Edmond | |
8 | Alverta | Ozella | Hodkiewicz | Matilde44@gmail.com | 230.722.3337 x646 | 3531 Konopelski Inlet | 36358-5008 | Denesikworth | |
9 | Paxton | Lisandro | Zemlak | Darion.Koelpin83@gmail.com | 1-826-360-9222 x31636 | 932 Greenfelder Fords | 46818-2852 | Port Douglasbury | |
10 | Fidel | Jaden | Wisozk | Fredrick.Ernser25@gmail.com | 904.414.6442 | 715 Cade Bridge | 77775 | Llewellynfurt | |
11 | Rashad | Clovis | Bayer | Nathanael99@yahoo.com | 958-750-3100 x2398 | 5431 Kevon Oval | 07958 | Lake Wilson | |
12 | Kimberly | Keenan | Goldner | Cathy.Haag@hotmail.com | 492.298.0659 x33540 | 3904 Selina Creek | 90064 | Salinas | |
13 | Lillian | Mitchel | Cronin-Marvin | Era55@gmail.com | 927.649.0461 x986 | 412 Joesph Union | 51447-6131 | Borerberg | |
14 | Josefina | Esmeralda | Cummings-Jones | Geo98@gmail.com | (389) 442-9196 | 2809 Willms Pine | 63372-0024 | Predovicstad | |
15 | Eleanora | Tatum | Emard | Axel.Volkman@yahoo.com | 756-235-4233 x21002 | 1295 Cathy Heights | 34663-2921 | Genovevaview | |
16 | Crystel | Oceane | Fadel | Flossie.Walter@yahoo.com | 363.982.5225 | 794 Hegmann Bypass | 37181-7404 | New Goldenmouth | |
17 | Ramon | Wilfredo | Murazik | Ron62@yahoo.com | 1-890-421-6814 | 75557 Nitzsche Springs | 17491-7816 | O'Reillyfurt |
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';1011const Example = () => {12 const columns = useMemo<MRT_ColumnDef<Person>[]>(13 //column definitions...90 );9192 //optionally access the underlying virtualizer instance93 const rowVirtualizerInstanceRef = useRef<MRT_RowVirtualizer>(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 const table = useMaterialReactTable({116 columns,117 data, //10,000 rows118 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, //optional131 rowVirtualizerOptions: { overscan: 5 }, //optionally customize the row virtualizer132 columnVirtualizerOptions: { overscan: 2 }, //optionally customize the column virtualizer133 });134135 return <MaterialReactTable table={table} />;136};137138export default Example;139
View Extra Storybook Examples