📄 tanstack/virtual/v3/docs/framework/react/examples/table
File: table.md | Updated: 11/15/2025
Source: https://tanstack.com/virtual/v3/docs/framework/react/examples/table
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
v3
Search...
+ K
Menu
Getting Started
Core APIs
Examples
Framework
React
Version
v3
Menu
Getting Started
Core APIs
Examples
React Example: Table
=================================================================================================================================================================================================================================================================================================================================================================================================
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 * as React from 'react'
import { createRoot } from 'react-dom/client'
import { useVirtualizer } from '@tanstack/react-virtual'
import {
flexRender,
getCoreRowModel,
getSortedRowModel,
useReactTable,
} from '@tanstack/react-table'
import { makeData } from './makeData'
import type { ColumnDef, Row, SortingState } from '@tanstack/react-table'
import type { Person } from './makeData'
import './index.css'
function ReactTableVirtualized() {
const [sorting, setSorting] = React.useState<SortingState>([])
const columns = React.useMemo<Array<ColumnDef<Person>>>(
() => [\
{\
accessorKey: 'id',\
header: 'ID',\
size: 60,\
},\
{\
accessorKey: 'firstName',\
cell: (info) => info.getValue(),\
},\
{\
accessorFn: (row) => row.lastName,\
id: 'lastName',\
cell: (info) => info.getValue(),\
header: () => <span>Last Name</span>,\
},\
{\
accessorKey: 'age',\
header: () => 'Age',\
size: 50,\
},\
{\
accessorKey: 'visits',\
header: () => <span>Visits</span>,\
size: 50,\
},\
{\
accessorKey: 'status',\
header: 'Status',\
},\
{\
accessorKey: 'progress',\
header: 'Profile Progress',\
size: 80,\
},\
{\
accessorKey: 'createdAt',\
header: 'Created At',\
cell: (info) => info.getValue<Date>().toLocaleString(),\
},\
],
[],
)
const [data, setData] = React.useState(() => makeData(50_000))
const table = useReactTable({
data,
columns,
state: {
sorting,
},
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
debugTable: true,
})
const { rows } = table.getRowModel()
const parentRef = React.useRef<HTMLDivElement>(null)
const virtualizer = useVirtualizer({
count: rows.length,
getScrollElement: () => parentRef.current,
estimateSize: () => 34,
overscan: 20,
})
return (
<div ref={parentRef} className="container">
<div style={{ height: `${virtualizer.getTotalSize()}px` }}>
<table>
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<th
key={header.id}
colSpan={header.colSpan}
style={{ width: header.getSize() }}
>
{header.isPlaceholder ? null : (
<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>
)
})}
</tr>
))}
</thead>
<tbody>
{virtualizer.getVirtualItems().map((virtualRow, index) => {
const row = rows[virtualRow.index]
return (
<tr
key={row.id}
style={{
height: `${virtualRow.size}px`,
transform: `translateY(${
virtualRow.start - index * virtualRow.size
}px)`,
}}
>
{row.getVisibleCells().map((cell) => {
return (
<td key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</td>
)
})}
</tr>
)
})}
</tbody>
</table>
</div>
</div>
)
}
function App() {
return (
<div>
<p>
For tables, the basis for the offset of the translate css function is
from the row's initial position itself. Because of this, we need to
calculate the translateY pixel count differently and base it off the
index.
</p>
<ReactTableVirtualized />
<br />
<br />
{process.env.NODE_ENV === 'development' ? (
<p>
<strong>Notice:</strong> You are currently running React in
development mode. Rendering performance will be slightly degraded
until this application is built for production.
</p>
) : null}
</div>
)
}
const container = document.getElementById('root')
const root = createRoot(container!)
const { StrictMode } = React
root.render(
<StrictMode>
<App />
</StrictMode>,
)
import * as React from 'react'
import { createRoot } from 'react-dom/client'
import { useVirtualizer } from '@tanstack/react-virtual'
import {
flexRender,
getCoreRowModel,
getSortedRowModel,
useReactTable,
} from '@tanstack/react-table'
import { makeData } from './makeData'
import type { ColumnDef, Row, SortingState } from '@tanstack/react-table'
import type { Person } from './makeData'
import './index.css'
function ReactTableVirtualized() {
const [sorting, setSorting] = React.useState<SortingState>([])
const columns = React.useMemo<Array<ColumnDef<Person>>>(
() => [\
{\
accessorKey: 'id',\
header: 'ID',\
size: 60,\
},\
{\
accessorKey: 'firstName',\
cell: (info) => info.getValue(),\
},\
{\
accessorFn: (row) => row.lastName,\
id: 'lastName',\
cell: (info) => info.getValue(),\
header: () => <span>Last Name</span>,\
},\
{\
accessorKey: 'age',\
header: () => 'Age',\
size: 50,\
},\
{\
accessorKey: 'visits',\
header: () => <span>Visits</span>,\
size: 50,\
},\
{\
accessorKey: 'status',\
header: 'Status',\
},\
{\
accessorKey: 'progress',\
header: 'Profile Progress',\
size: 80,\
},\
{\
accessorKey: 'createdAt',\
header: 'Created At',\
cell: (info) => info.getValue<Date>().toLocaleString(),\
},\
],
[],
)
const [data, setData] = React.useState(() => makeData(50_000))
const table = useReactTable({
data,
columns,
state: {
sorting,
},
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
debugTable: true,
})
const { rows } = table.getRowModel()
const parentRef = React.useRef<HTMLDivElement>(null)
const virtualizer = useVirtualizer({
count: rows.length,
getScrollElement: () => parentRef.current,
estimateSize: () => 34,
overscan: 20,
})
return (
<div ref={parentRef} className="container">
<div style={{ height: `${virtualizer.getTotalSize()}px` }}>
<table>
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<th
key={header.id}
colSpan={header.colSpan}
style={{ width: header.getSize() }}
>
{header.isPlaceholder ? null : (
<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>
)
})}
</tr>
))}
</thead>
<tbody>
{virtualizer.getVirtualItems().map((virtualRow, index) => {
const row = rows[virtualRow.index]
return (
<tr
key={row.id}
style={{
height: `${virtualRow.size}px`,
transform: `translateY(${
virtualRow.start - index * virtualRow.size
}px)`,
}}
>
{row.getVisibleCells().map((cell) => {
return (
<td key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</td>
)
})}
</tr>
)
})}
</tbody>
</table>
</div>
</div>
)
}
function App() {
return (
<div>
<p>
For tables, the basis for the offset of the translate css function is
from the row's initial position itself. Because of this, we need to
calculate the translateY pixel count differently and base it off the
index.
</p>
<ReactTableVirtualized />
<br />
<br />
{process.env.NODE_ENV === 'development' ? (
<p>
<strong>Notice:</strong> You are currently running React in
development mode. Rendering performance will be slightly degraded
until this application is built for production.
</p>
) : null}
</div>
)
}
const container = document.getElementById('root')
const root = createRoot(container!)
const { StrictMode } = React
root.render(
<StrictMode>
<App />
</StrictMode>,
)
