Column virtualization

Prop enableColumnVirtualization — engine behaviour, default false.

Guide

When to use it

Very wide grids — hundreds of columns — where even a windowed set of rows renders too many cells. Adds horizontal windowing on top of row virtualization.

How it works

A sub-toggle of enableVirtualization (needs it on). Header, filter row and body stay aligned via spacer cells as columns scroll in and out.

Gotchas

• No-op without enableVirtualization.
• Falls back to all-columns under column pinning, fitColumns, grouped headers or cell spanning.
• Always shown in the settings sheet ("Performance").

Live example

Example source

import React from 'react'
import { BstTableMui } from '@bloomskill/table-mui'
import type { BstTableColumn } from '@bloomskill/table-engine'
import '@bloomskill/table-engine/styles.css'
const cols: BstTableColumn<any>[] = Array.from({ length: 30 }, (_, i) => ({ id: 'c' + i, accessorKey: 'c' + i, header: 'Column ' + (i + 1), size: 130 }))
const rows = Array.from({ length: 300 }, (_, r) => { const o = { id: String(r) }; for (let i = 0; i < 30; i++) o['c' + i] = 'r' + (r + 1) + '·c' + (i + 1); return o })
export default function App() {
  return <BstTableMui data={rows} columns={cols} getRowId={(r) => r.id}
    enableVirtualization enableColumnVirtualization pagination={false} />
}

Loading live example…

Overview

Layer	enable* (engine, resolved in useBstTable)
Type	boolean
Default	false
Maps to	sub-toggle of enableVirtualization (needs it on) — also windows columns horizontally for very wide grids (header + filter row + body kept aligned via spacer cells); falls back to all-columns under column pinning / fitColumns / grouped headers / cell spanning. In settings ("Performance", always shown)
Status	✅ done
Since	v0.33.0
Settings sheet	Performance

Column virtualization — also window the columns horizontally, for very wide (100+ column) grids. Sub-toggle of enableVirtualization (needs it on). Falls back to rendering all columns when column pinning, fitColumns, grouped headers or cell spanning is active. Default false.

Enable it

<BstTableMui
  data={rows}
  columns={columns}
  enableColumnVirtualization
/>

Swap BstTableMui for BstTableShadcn (and the CSS import) for the shadcn skin — same props.

Behavior & interactions

• Requires enableVirtualization to be on — this flag is a no-op otherwise.
• Also windows columns horizontally, for very wide grids. Falls back to all-columns under column pinning, fitColumns, grouped headers or cell spanning.

Spec coverage

Spec codes (A1, C2, X8, …) are Bst-Table's internal requirement IDs from the capability matrix; P0–P2 mark the delivery phase. They are traceability tags, not part of the public API.

• D1 · Row & column virtualization — ✅ built. enableVirtualization (+ enableColumnVirtualization) on @tanstack/react-virtual — windowed rows (dynamic measure) + columns, sticky header, bounded DOM; yields to master-detail / grouping / cell spanning / row pinning. Tested (virtualization.test.tsx)