column-layout

What problem does it solve?

It solves the challenge of getting consistent, predictable column rendering behavior when users need to toggle visibility, reorder columns, pin them, resize them, and handle resize interactions correctly in TanStack Table v9.

Core Features & Use Cases

• Column visibility: manage which columns are shown and ensure your rendering uses the visible APIs (so toggles actually affect the UI).
• Column ordering: reorder only the center (unpinned) column region using columnOrder and the correct index APIs.
• Column pinning, sizing, and resizing: pin columns left/right, commit and read pixel-based sizes, and implement resize handlers and performant resize patterns.

Quick Start

Create a table with tableFeatures({ columnVisibilityFeature, columnOrderingFeature, columnPinningFeature, columnSizingFeature, columnResizingFeature }), initialize the related state slices, and render body cells from row.getVisibleCells() to reflect visibility correctly.