useTableColumnsVirtualization@astryxdesign/core v0.7.15 · useTableColumnsVirtualization

Usage

Returns an opaque capability for Table column windowing. Pass the capability to Table.virtualization and keep the complete data, columns, explicit stable idKey and plugins on Table. Columns keep their declared widths: an overflowing Table renders at its minimum width, and the window uses the width each column has there. Pinned columns from useTableStickyColumns always mount; only the columns between the pinned runs window, with a few overscan columns on each side. When the Table's scroll area is at least as wide as the Table's minimum width, every column mounts. Supported tables have one header row, flat rows, no cell that spans columns and single-line content; explicit wrapping, arbitrary custom renderers, non-flat rows, invalid identity, a caller-provided scrollWrapper or a min-width wider than the column floors render every column. Windowing columns together with useTableRowsVirtualization is not available yet: the Table windows its rows and renders every column. Two parts of column windowing are not available yet either: focus in an unpinned column is lost when that column scrolls out of the window, and changing column order, widths, visibility or pinning does not keep the first visible column in place. Mounted cells keep native table semantics and full-table column positions; unmounted columns are not promised screen-reader discovery. Keep the capability on the Table for its whole life: adding or removing it remounts the table, which resets focus and scroll position. Changing initialViewportWidth does not remount it.

ts
import {useTableColumnsVirtualization} from '@astryxdesign/core/Table'

Parameters

ParamTypeDescription
initialViewportWidthrequired
number

The inline viewport width in CSS pixels that the first window plans for, on the server and before the viewport is measured. It does not size the Table: after mount, the measured width of the Table's scroll area sets the window. Table accounts for its pinned columns.

Examples

Common configurations, variations, and states.
useTableColumnsVirtualization - Wide Table
Open in Playground

A Table with 121 columns: a pinned Sensor column and 120 monthly readings at fixed widths. Scroll horizontally to mount the columns near the scroll position; the pinned column always renders. initialViewportWidth sizes only the first window. The caller keeps all data and columns; this hook does not virtualize rows.

Use with shadcn

Already using the shadcn registry workflow? Install the real Astryx package and a local public re-export. Component implementation source stays in Astryx.

This install URL expires with the draft preview.
bash
npx shadcn@4.19.0 add https://astryx-7mrla3zsr-fbopensource.vercel.app/shadcn/hooks/use-table-columns-virtualization.json