Skip to content
gauchocodeUI GALLERY
LIBRARY
All blocks58Data display15Navigation & shell14Forms & actions7Planning12Feedback & overlays4AI & automation4Apps & admin2
RESOURCES
CommunityTeam library
GC
GauchoCodeEngineering & design
v0.1
WorkspaceUI Gallery
CommunityTeam library
BlocksData displayResizable columns

Resizable columns

Adapted

Give every column its space. Drag a header edge, or focus the separator and use the keyboard within safe bounds.

Column sizingKeyboardPointer
React · CSS
Origin & adaptation notes

Adapts the TanStack Table v9 column-sizing pattern: a separator with role, tabIndex and aria-valuenow, Arrow keys stepping 16 px, Home/End jumping to bounds, clamped here to 100-420 px. No TanStack dependency in this demo.

Curated adaptation. Synthetic data only. No production APIs.

PreviousContact tableNextPinned first column
Built with intention. Shared with the team.GauchoCode UI Gallery ✳