Virtualizing a 50,000-Row × 200-Column Data Grid at 60FPS with TanStack Table + TanStack Virtual + React Query

Total data: 50,000 rows
      ↓
React Query: fetches from server in chunks of 50 → managed as a page array
      ↓
TanStack Table: receives flatData, applies sorting/filtering → constructs row model
      ↓
TanStack Virtual: extracts only 17 row indices currently visible
      ↓
Actual DOM: only 17 <tr> elements exist

// types.ts
type User = {
  id: string
  name: string
  email: string
  department: string
  joinedAt: string
}
 
type FetchUsersResponse = {
  rows: User[]
  nextCursor: number | null
  totalCount: number
}
 
async function fetchUsers({
  page,
  limit,
}: {
  page: number
  limit: number
}): Promise<FetchUsersResponse> {
  const res = await fetch(`/api/users?page=${page}&limit=${limit}`)
  if (!res.ok) throw new Error('fetch failed')
  return res.json()
}

// VirtualizedTable.tsx
import {
  useInfiniteQuery,
} from '@tanstack/react-query'
import {
  useReactTable,
  getCoreRowModel,
  flexRender,
  type ColumnDef,
} from '@tanstack/react-table'
import { useVirtualizer } from '@tanstack/react-virtual'
import { useRef, useMemo, useEffect } from 'react'
 
const FETCH_SIZE = 50
 
const columns: ColumnDef<User>[] = [
  { accessorKey: 'name', header: 'Name', size: 150 },
  { accessorKey: 'email', header: 'Email', size: 200 },
  { accessorKey: 'department', header: 'Department', size: 120 },
  { accessorKey: 'joinedAt', header: 'Joined', size: 120 },
]
 
export function VirtualizedTable() {
  const tableContainerRef = useRef<HTMLDivElement>(null)
 
  // 1. React Query: fetch data from server in page units
  const { data, fetchNextPage, hasNextPage, isFetching } =
    useInfiniteQuery({
      queryKey: ['users'],
      queryFn: ({ pageParam }) =>
        fetchUsers({ page: pageParam as number, limit: FETCH_SIZE }),
      getNextPageParam: (lastPage) => lastPage.nextCursor,
      initialPageParam: 0,
    })
 
  // 2. Flatten the page array into a single flat array
  const flatData = useMemo(
    () => data?.pages.flatMap((page) => page.rows) ?? [],
    [data]
  )
  const totalCount = data?.pages[0]?.totalCount ?? 0
 
  // 3. TanStack Table: construct the row model
  const table = useReactTable({
    data: flatData,
    columns,
    getCoreRowModel: getCoreRowModel(),
    // Omitting these two options with server-side data throws off pagination calculations
    manualPagination: true,
    rowCount: totalCount,
  })
 
  const { rows } = table.getRowModel()
 
  // 4. TanStack Virtual: render only the currently visible rows
  const rowVirtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: () => tableContainerRef.current,
    estimateSize: () => 48,
    overscan: 10,
  })
 
  const virtualRows = rowVirtualizer.getVirtualItems()
 
  // 5. Detect scroll end → automatically fetch next page
  useEffect(() => {
    const lastItem = virtualRows.at(-1)
    if (
      lastItem &&
      lastItem.index >= flatData.length - 1 &&
      hasNextPage &&
      !isFetching
    ) {
      fetchNextPage()
    }
  }, [virtualRows, flatData.length, hasNextPage, isFetching, fetchNextPage])
 
  const totalSize = rowVirtualizer.getTotalSize()
 
  return (
    <div
      ref={tableContainerRef}
      style={{ height: '600px', overflow: 'auto', position: 'relative' }}
    >
      <table style={{ display: 'grid' }}>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id} style={{ display: 'flex' }}>
              {headerGroup.headers.map((header) => (
                <th key={header.id} style={{ width: header.getSize() }}>
                  {flexRender(
                    header.column.columnDef.header,
                    header.getContext()
                  )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody
          style={{ height: `${totalSize}px`, position: 'relative' }}
        >
          {virtualRows.map((virtualRow) => {
            const row = rows[virtualRow.index]
            return (
              <tr
                key={row.id}
                style={{
                  position: 'absolute',
                  transform: `translateY(${virtualRow.start}px)`,
                  display: 'flex',
                  width: '100%',
                }}
              >
                {row.getVisibleCells().map((cell) => (
                  <td
                    key={cell.id}
                    style={{ width: cell.column.getSize() }}
                  >
                    {flexRender(
                      cell.column.columnDef.cell,
                      cell.getContext()
                    )}
                  </td>
                ))}
              </tr>
            )
          })}
        </tbody>
      </table>
      {isFetching && <div>Loading more...</div>}
    </div>
  )
}

// BidirectionalVirtualizedTable.tsx
// The React Query + flatData section is identical to Example 1 — only table/virtualizer onward is shown below
 
import {
  useReactTable,
  getCoreRowModel,
  flexRender,
  type ColumnDef,
  type Header,
} from '@tanstack/react-table'
import { useVirtualizer } from '@tanstack/react-virtual'
import { useRef, useMemo } from 'react'
 
export function BidirectionalVirtualizedTable({
  flatData,        // same structure as flatData from Example 1
  totalCount,
}: {
  flatData: User[]
  totalCount: number
}) {
  const tableContainerRef = useRef<HTMLDivElement>(null)
 
  const table = useReactTable({
    data: flatData,
    columns, // e.g. 200 columns (type: ColumnDef<User>[])
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true,
    rowCount: totalCount,
    defaultColumn: { size: 150 },
  })
 
  const { rows } = table.getRowModel()
  const visibleColumns = table.getVisibleLeafColumns()
 
  // Map headers by column ID — safe ID-based lookup instead of index access
  const headerByColumnId = useMemo(() => {
    const leafHeaders =
      table.getHeaderGroups().at(-1)?.headers ?? []
    return new Map<string, Header<User, unknown>>(
      leafHeaders.map((h) => [h.column.id, h])
    )
  }, [table])
 
  // Row virtualizer (vertical)
  const rowVirtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: () => tableContainerRef.current,
    estimateSize: () => 35,
    overscan: 5,
  })
 
  // Column virtualizer (horizontal)
  const columnVirtualizer = useVirtualizer({
    horizontal: true,
    count: visibleColumns.length,
    getScrollElement: () => tableContainerRef.current,
    estimateSize: (index) => visibleColumns[index].getSize(),
    overscan: 3,
  })
 
  const virtualRows = rowVirtualizer.getVirtualItems()
  const virtualColumns = columnVirtualizer.getVirtualItems()
 
  const totalRowHeight = rowVirtualizer.getTotalSize()
  const totalColWidth = columnVirtualizer.getTotalSize()
 
  return (
    <div
      ref={tableContainerRef}
      style={{ height: '600px', width: '100%', overflow: 'auto' }}
    >
      <div
        style={{
          height: `${totalRowHeight}px`,
          width: `${totalColWidth}px`,
          position: 'relative',
        }}
      >
        {/* Header — pinned to top via position: sticky */}
        <div
          style={{
            position: 'sticky',
            top: 0,
            zIndex: 1,
            background: 'white',
          }}
        >
          {virtualColumns.map((virtualColumn) => {
            const col = visibleColumns[virtualColumn.index]
            const header = headerByColumnId.get(col.id)
            if (!header) return null
            return (
              <div
                key={virtualColumn.key}
                style={{
                  position: 'absolute',
                  left: virtualColumn.start,
                  width: virtualColumn.size,
                  height: 35,
                }}
              >
                {flexRender(
                  header.column.columnDef.header,
                  header.getContext()
                )}
              </div>
            )
          })}
        </div>
 
        {/* Body — renders only the intersection of visible rows and columns */}
        {virtualRows.map((virtualRow) => {
          const row = rows[virtualRow.index]
          const visibleCells = row.getVisibleCells()
          return virtualColumns.map((virtualColumn) => {
            const cell = visibleCells[virtualColumn.index]
            return (
              <div
                key={`${virtualRow.index}-${virtualColumn.index}`}
                style={{
                  position: 'absolute',
                  top: virtualRow.start + 35, // header height offset
                  left: virtualColumn.start,
                  width: virtualColumn.size,
                  height: virtualRow.size,
                }}
              >
                {flexRender(
                  cell.column.columnDef.cell,
                  cell.getContext()
                )}
              </div>
            )
          })
        })}
      </div>
    </div>
  )
}

[Scroll container: overflow: auto, position: relative]
  └─ [Full-size div: total width/height, position: relative]
       ├─ [Sticky header: position: sticky, top: 0, zIndex: 2]
       │    └─ [Virtual column headers: position: absolute, left: ...]
       │         ※ transform must NOT be present inside this element
       └─ [Body: position: relative, top: header height]
            └─ [Virtual cells: position: absolute, top/left: ...]

// Adding fixed-column handling to BidirectionalVirtualizedTable from Example 2
 
// Add sticky meta to column definitions
const columns: ColumnDef<User>[] = [
  {
    id: 'name',
    header: 'Name',
    accessorKey: 'name',
    size: 200,
    meta: { sticky: true },
  },
  // ...remaining columns
]
 
// In rendering — replace the body rendering section from Example 2 with the following
{virtualRows.map((virtualRow) => {
  const row = rows[virtualRow.index]
  const visibleCells = row.getVisibleCells()
  return virtualColumns.map((virtualColumn) => {
    const isSticky = virtualColumn.index === 0
    const cell = visibleCells[virtualColumn.index]
    return (
      <div
        key={`${virtualRow.index}-${virtualColumn.index}`}
        style={{
          // sticky columns use sticky instead of absolute
          position: isSticky ? 'sticky' : 'absolute',
          top: isSticky
            ? virtualRow.start + 35
            : virtualRow.start + 35,
          left: isSticky ? 0 : virtualColumn.start,
          zIndex: isSticky ? 2 : 0,
          width: virtualColumn.size,
          height: virtualRow.size,
          background: isSticky ? 'white' : 'transparent',
          // ※ do NOT apply transform directly to sticky elements
        }}
      >
        {flexRender(cell.column.columnDef.cell, cell.getContext())}
      </div>
    )
  })
})}