📄 tanstack/table/v8/docs/framework/react/examples/virtualized-columns
File: virtualized-columns.md | Updated: 11/15/2025
Source: https://tanstack.com/table/v8/docs/framework/react/examples/virtualized-columns
Search...
+ K
Auto
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide
Documentation
Framework
React
Version
v8
Search...
+ K
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples
Framework
React
Version
v8
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples
React Example: Virtualized Columns
===================================================================================================================================================================================================================================================================================================================================================================================================================================================
Code ExplorerCode
Interactive SandboxSandbox
-
src
-
index.css
-
main.tsx
-
makeData.ts
-
-
.gitignore
-
README.md
-
index.html
-
package.json
-
tsconfig.json
-
vite.config.js
tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import {
Cell,
ColumnDef,
Header,
HeaderGroup,
Row,
Table,
flexRender,
getCoreRowModel,
getSortedRowModel,
useReactTable,
} from '@tanstack/react-table'
import {
useVirtualizer,
VirtualItem,
Virtualizer,
} from '@tanstack/react-virtual'
import { makeColumns, makeData, Person } from './makeData'
function App() {
const columns = React.useMemo<ColumnDef<Person>[]>(
() => makeColumns(1_000),
[]
)
const [data, setData] = React.useState(() => makeData(1_000, columns))
const refreshData = React.useCallback(() => {
setData(makeData(1_000, columns))
}, [columns])
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
debugTable: true,
})
//All important CSS styles are included as inline styles for this example. This is not recommended for your code.
return (
<div className="app">
{process.env.NODE_ENV === 'development' ? (
<p>
<strong>Notice:</strong> You are currently running React in
development mode. Virtualized rendering performance will be slightly
degraded until this application is built for production.
</p>
) : null}
<div>({columns.length.toLocaleString()} columns)</div>
<div>({data.length.toLocaleString()} rows)</div>
<button onClick={refreshData}>Refresh Data</button>
<TableContainer table={table} />
</div>
)
}
interface TableContainerProps {
table: Table<Person>
}
function TableContainer({ table }: TableContainerProps) {
const visibleColumns = table.getVisibleLeafColumns()
//The virtualizers need to know the scrollable container element
const tableContainerRef = React.useRef<HTMLDivElement>(null)
//we are using a slightly different virtualization strategy for columns (compared to virtual rows) in order to support dynamic row heights
const columnVirtualizer = useVirtualizer<
HTMLDivElement,
HTMLTableCellElement
>({
count: visibleColumns.length,
estimateSize: index => visibleColumns[index].getSize(), //estimate width of each column for accurate scrollbar dragging
getScrollElement: () => tableContainerRef.current,
horizontal: true,
overscan: 3, //how many columns to render on each side off screen each way (adjust this for performance)
})
const virtualColumns = columnVirtualizer.getVirtualItems()
//different virtualization strategy for columns - instead of absolute and translateY, we add empty columns to the left and right
let virtualPaddingLeft: number | undefined
let virtualPaddingRight: number | undefined
if (columnVirtualizer && virtualColumns?.length) {
virtualPaddingLeft = virtualColumns[0]?.start ?? 0
virtualPaddingRight =
columnVirtualizer.getTotalSize() -
(virtualColumns[virtualColumns.length - 1]?.end ?? 0)
}
return (
<div
className="container"
ref={tableContainerRef}
style={{
overflow: 'auto', //our scrollable table container
position: 'relative', //needed for sticky header
height: '800px', //should be a fixed height
}}
>
{/* Even though we're still using sematic table tags, we must use CSS grid and flexbox for dynamic row heights */}
<table style={{ display: 'grid' }}>
<TableHead
columnVirtualizer={columnVirtualizer}
table={table}
virtualPaddingLeft={virtualPaddingLeft}
virtualPaddingRight={virtualPaddingRight}
/>
<TableBody
columnVirtualizer={columnVirtualizer}
table={table}
tableContainerRef={tableContainerRef}
virtualPaddingLeft={virtualPaddingLeft}
virtualPaddingRight={virtualPaddingRight}
/>
</table>
</div>
)
}
interface TableHeadProps {
columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>
table: Table<Person>
virtualPaddingLeft: number | undefined
virtualPaddingRight: number | undefined
}
function TableHead({
columnVirtualizer,
table,
virtualPaddingLeft,
virtualPaddingRight,
}: TableHeadProps) {
return (
<thead
style={{
display: 'grid',
position: 'sticky',
top: 0,
zIndex: 1,
}}
>
{table.getHeaderGroups().map(headerGroup => (
<TableHeadRow
columnVirtualizer={columnVirtualizer}
headerGroup={headerGroup}
key={headerGroup.id}
virtualPaddingLeft={virtualPaddingLeft}
virtualPaddingRight={virtualPaddingRight}
/>
))}
</thead>
)
}
interface TableHeadRowProps {
columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>
headerGroup: HeaderGroup<Person>
virtualPaddingLeft: number | undefined
virtualPaddingRight: number | undefined
}
function TableHeadRow({
columnVirtualizer,
headerGroup,
virtualPaddingLeft,
virtualPaddingRight,
}: TableHeadRowProps) {
const virtualColumns = columnVirtualizer.getVirtualItems()
return (
<tr key={headerGroup.id} style={{ display: 'flex', width: '100%' }}>
{virtualPaddingLeft ? (
//fake empty column to the left for virtualization scroll padding
<th style={{ display: 'flex', width: virtualPaddingLeft }} />
) : null}
{virtualColumns.map(virtualColumn => {
const header = headerGroup.headers[virtualColumn.index]
return <TableHeadCell key={header.id} header={header} />
})}
{virtualPaddingRight ? (
//fake empty column to the right for virtualization scroll padding
<th style={{ display: 'flex', width: virtualPaddingRight }} />
) : null}
</tr>
)
}
interface TableHeadCellProps {
header: Header<Person, unknown>
}
function TableHeadCell({ header }: TableHeadCellProps) {
return (
<th
key={header.id}
style={{
display: 'flex',
width: header.getSize(),
}}
>
<div
{...{
className: header.column.getCanSort()
? 'cursor-pointer select-none'
: '',
onClick: header.column.getToggleSortingHandler(),
}}
>
{flexRender(header.column.columnDef.header, header.getContext())}
{{
asc: ' 🔼',
desc: ' 🔽',
}[header.column.getIsSorted() as string] ?? null}
</div>
</th>
)
}
interface TableBodyProps {
columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>
table: Table<Person>
tableContainerRef: React.RefObject<HTMLDivElement>
virtualPaddingLeft: number | undefined
virtualPaddingRight: number | undefined
}
function TableBody({
columnVirtualizer,
table,
tableContainerRef,
virtualPaddingLeft,
virtualPaddingRight,
}: TableBodyProps) {
const { rows } = table.getRowModel()
//dynamic row height virtualization - alternatively you could use a simpler fixed row height strategy without the need for `measureElement`
const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({
count: rows.length,
estimateSize: () => 33, //estimate row height for accurate scrollbar dragging
getScrollElement: () => tableContainerRef.current,
//measure dynamic row height, except in firefox because it measures table border height incorrectly
measureElement:
typeof window !== 'undefined' &&
navigator.userAgent.indexOf('Firefox') === -1
? element => element?.getBoundingClientRect().height
: undefined,
overscan: 5,
})
const virtualRows = rowVirtualizer.getVirtualItems()
return (
<tbody
style={{
display: 'grid',
height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is
position: 'relative', //needed for absolute positioning of rows
}}
>
{virtualRows.map(virtualRow => {
const row = rows[virtualRow.index] as Row<Person>
return (
<TableBodyRow
columnVirtualizer={columnVirtualizer}
key={row.id}
row={row}
rowVirtualizer={rowVirtualizer}
virtualPaddingLeft={virtualPaddingLeft}
virtualPaddingRight={virtualPaddingRight}
virtualRow={virtualRow}
/>
)
})}
</tbody>
)
}
interface TableBodyRowProps {
columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>
row: Row<Person>
rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>
virtualPaddingLeft: number | undefined
virtualPaddingRight: number | undefined
virtualRow: VirtualItem
}
function TableBodyRow({
columnVirtualizer,
row,
rowVirtualizer,
virtualPaddingLeft,
virtualPaddingRight,
virtualRow,
}: TableBodyRowProps) {
const visibleCells = row.getVisibleCells()
const virtualColumns = columnVirtualizer.getVirtualItems()
return (
<tr
data-index={virtualRow.index} //needed for dynamic row height measurement
ref={node => rowVirtualizer.measureElement(node)} //measure dynamic row height
key={row.id}
style={{
display: 'flex',
position: 'absolute',
transform: `translateY(${virtualRow.start}px)`, //this should always be a `style` as it changes on scroll
width: '100%',
}}
>
{virtualPaddingLeft ? (
//fake empty column to the left for virtualization scroll padding
<td style={{ display: 'flex', width: virtualPaddingLeft }} />
) : null}
{virtualColumns.map(vc => {
const cell = visibleCells[vc.index]
return <TableBodyCell key={cell.id} cell={cell} />
})}
{virtualPaddingRight ? (
//fake empty column to the right for virtualization scroll padding
<td style={{ display: 'flex', width: virtualPaddingRight }} />
) : null}
</tr>
)
}
interface TableBodyCellProps {
cell: Cell<Person, unknown>
}
function TableBodyCell({ cell }: TableBodyCellProps) {
return (
<td
key={cell.id}
style={{
display: 'flex',
width: cell.column.getSize(),
}}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
)
}
const rootElement = document.getElementById('root')
if (!rootElement) throw new Error('Failed to find the root element')
ReactDOM.createRoot(rootElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import {
Cell,
ColumnDef,
Header,
HeaderGroup,
Row,
Table,
flexRender,
getCoreRowModel,
getSortedRowModel,
useReactTable,
} from '@tanstack/react-table'
import {
useVirtualizer,
VirtualItem,
Virtualizer,
} from '@tanstack/react-virtual'
import { makeColumns, makeData, Person } from './makeData'
function App() {
const columns = React.useMemo<ColumnDef<Person>[]>(
() => makeColumns(1_000),
[]
)
const [data, setData] = React.useState(() => makeData(1_000, columns))
const refreshData = React.useCallback(() => {
setData(makeData(1_000, columns))
}, [columns])
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
debugTable: true,
})
//All important CSS styles are included as inline styles for this example. This is not recommended for your code.
return (
<div className="app">
{process.env.NODE_ENV === 'development' ? (
<p>
<strong>Notice:</strong> You are currently running React in
development mode. Virtualized rendering performance will be slightly
degraded until this application is built for production.
</p>
) : null}
<div>({columns.length.toLocaleString()} columns)</div>
<div>({data.length.toLocaleString()} rows)</div>
<button onClick={refreshData}>Refresh Data</button>
<TableContainer table={table} />
</div>
)
}
interface TableContainerProps {
table: Table<Person>
}
function TableContainer({ table }: TableContainerProps) {
const visibleColumns = table.getVisibleLeafColumns()
//The virtualizers need to know the scrollable container element
const tableContainerRef = React.useRef<HTMLDivElement>(null)
//we are using a slightly different virtualization strategy for columns (compared to virtual rows) in order to support dynamic row heights
const columnVirtualizer = useVirtualizer<
HTMLDivElement,
HTMLTableCellElement
>({
count: visibleColumns.length,
estimateSize: index => visibleColumns[index].getSize(), //estimate width of each column for accurate scrollbar dragging
getScrollElement: () => tableContainerRef.current,
horizontal: true,
overscan: 3, //how many columns to render on each side off screen each way (adjust this for performance)
})
const virtualColumns = columnVirtualizer.getVirtualItems()
//different virtualization strategy for columns - instead of absolute and translateY, we add empty columns to the left and right
let virtualPaddingLeft: number | undefined
let virtualPaddingRight: number | undefined
if (columnVirtualizer && virtualColumns?.length) {
virtualPaddingLeft = virtualColumns[0]?.start ?? 0
virtualPaddingRight =
columnVirtualizer.getTotalSize() -
(virtualColumns[virtualColumns.length - 1]?.end ?? 0)
}
return (
<div
className="container"
ref={tableContainerRef}
style={{
overflow: 'auto', //our scrollable table container
position: 'relative', //needed for sticky header
height: '800px', //should be a fixed height
}}
>
{/* Even though we're still using sematic table tags, we must use CSS grid and flexbox for dynamic row heights */}
<table style={{ display: 'grid' }}>
<TableHead
columnVirtualizer={columnVirtualizer}
table={table}
virtualPaddingLeft={virtualPaddingLeft}
virtualPaddingRight={virtualPaddingRight}
/>
<TableBody
columnVirtualizer={columnVirtualizer}
table={table}
tableContainerRef={tableContainerRef}
virtualPaddingLeft={virtualPaddingLeft}
virtualPaddingRight={virtualPaddingRight}
/>
</table>
</div>
)
}
interface TableHeadProps {
columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>
table: Table<Person>
virtualPaddingLeft: number | undefined
virtualPaddingRight: number | undefined
}
function TableHead({
columnVirtualizer,
table,
virtualPaddingLeft,
virtualPaddingRight,
}: TableHeadProps) {
return (
<thead
style={{
display: 'grid',
position: 'sticky',
top: 0,
zIndex: 1,
}}
>
{table.getHeaderGroups().map(headerGroup => (
<TableHeadRow
columnVirtualizer={columnVirtualizer}
headerGroup={headerGroup}
key={headerGroup.id}
virtualPaddingLeft={virtualPaddingLeft}
virtualPaddingRight={virtualPaddingRight}
/>
))}
</thead>
)
}
interface TableHeadRowProps {
columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>
headerGroup: HeaderGroup<Person>
virtualPaddingLeft: number | undefined
virtualPaddingRight: number | undefined
}
function TableHeadRow({
columnVirtualizer,
headerGroup,
virtualPaddingLeft,
virtualPaddingRight,
}: TableHeadRowProps) {
const virtualColumns = columnVirtualizer.getVirtualItems()
return (
<tr key={headerGroup.id} style={{ display: 'flex', width: '100%' }}>
{virtualPaddingLeft ? (
//fake empty column to the left for virtualization scroll padding
<th style={{ display: 'flex', width: virtualPaddingLeft }} />
) : null}
{virtualColumns.map(virtualColumn => {
const header = headerGroup.headers[virtualColumn.index]
return <TableHeadCell key={header.id} header={header} />
})}
{virtualPaddingRight ? (
//fake empty column to the right for virtualization scroll padding
<th style={{ display: 'flex', width: virtualPaddingRight }} />
) : null}
</tr>
)
}
interface TableHeadCellProps {
header: Header<Person, unknown>
}
function TableHeadCell({ header }: TableHeadCellProps) {
return (
<th
key={header.id}
style={{
display: 'flex',
width: header.getSize(),
}}
>
<div
{...{
className: header.column.getCanSort()
? 'cursor-pointer select-none'
: '',
onClick: header.column.getToggleSortingHandler(),
}}
>
{flexRender(header.column.columnDef.header, header.getContext())}
{{
asc: ' 🔼',
desc: ' 🔽',
}[header.column.getIsSorted() as string] ?? null}
</div>
</th>
)
}
interface TableBodyProps {
columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>
table: Table<Person>
tableContainerRef: React.RefObject<HTMLDivElement>
virtualPaddingLeft: number | undefined
virtualPaddingRight: number | undefined
}
function TableBody({
columnVirtualizer,
table,
tableContainerRef,
virtualPaddingLeft,
virtualPaddingRight,
}: TableBodyProps) {
const { rows } = table.getRowModel()
//dynamic row height virtualization - alternatively you could use a simpler fixed row height strategy without the need for `measureElement`
const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({
count: rows.length,
estimateSize: () => 33, //estimate row height for accurate scrollbar dragging
getScrollElement: () => tableContainerRef.current,
//measure dynamic row height, except in firefox because it measures table border height incorrectly
measureElement:
typeof window !== 'undefined' &&
navigator.userAgent.indexOf('Firefox') === -1
? element => element?.getBoundingClientRect().height
: undefined,
overscan: 5,
})
const virtualRows = rowVirtualizer.getVirtualItems()
return (
<tbody
style={{
display: 'grid',
height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is
position: 'relative', //needed for absolute positioning of rows
}}
>
{virtualRows.map(virtualRow => {
const row = rows[virtualRow.index] as Row<Person>
return (
<TableBodyRow
columnVirtualizer={columnVirtualizer}
key={row.id}
row={row}
rowVirtualizer={rowVirtualizer}
virtualPaddingLeft={virtualPaddingLeft}
virtualPaddingRight={virtualPaddingRight}
virtualRow={virtualRow}
/>
)
})}
</tbody>
)
}
interface TableBodyRowProps {
columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>
row: Row<Person>
rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>
virtualPaddingLeft: number | undefined
virtualPaddingRight: number | undefined
virtualRow: VirtualItem
}
function TableBodyRow({
columnVirtualizer,
row,
rowVirtualizer,
virtualPaddingLeft,
virtualPaddingRight,
virtualRow,
}: TableBodyRowProps) {
const visibleCells = row.getVisibleCells()
const virtualColumns = columnVirtualizer.getVirtualItems()
return (
<tr
data-index={virtualRow.index} //needed for dynamic row height measurement
ref={node => rowVirtualizer.measureElement(node)} //measure dynamic row height
key={row.id}
style={{
display: 'flex',
position: 'absolute',
transform: `translateY(${virtualRow.start}px)`, //this should always be a `style` as it changes on scroll
width: '100%',
}}
>
{virtualPaddingLeft ? (
//fake empty column to the left for virtualization scroll padding
<td style={{ display: 'flex', width: virtualPaddingLeft }} />
) : null}
{virtualColumns.map(vc => {
const cell = visibleCells[vc.index]
return <TableBodyCell key={cell.id} cell={cell} />
})}
{virtualPaddingRight ? (
//fake empty column to the right for virtualization scroll padding
<td style={{ display: 'flex', width: virtualPaddingRight }} />
) : null}
</tr>
)
}
interface TableBodyCellProps {
cell: Cell<Person, unknown>
}
function TableBodyCell({ cell }: TableBodyCellProps) {
return (
<td
key={cell.id}
style={{
display: 'flex',
width: cell.column.getSize(),
}}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
)
}
const rootElement = document.getElementById('root')
if (!rootElement) throw new Error('Failed to find the root element')
ReactDOM.createRoot(rootElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
Virtualized Columns (Experimental)
