Pin On Demand

The component is self-contained: one file, no dependencies, the palette in --vibeui-datagrid-014-*. A client component: useState holds the list of pinned keys, but the order is taken from the order of the columns rather than of the clicks — otherwise the columns would swap places under the cursor. The column width is fixed by the --vibeui-datagrid-014-col variable together with table-layout:fixed: only that way is left computed by a calc formula, with no measuring in the browser. A sticky cell carries a background of its own, and the table is built with border-collapse:separate. The pin is a button with aria-pressed and an aria-label of its own, and the number of pinned columns is capped by a prop. The scrolling lives in a container with role=region, aria-label and tabindex=0. The theme comes from the surrounding color-scheme through light-dark(): by default the grid lays no panel under itself, it sits directly on the page background and darkens along with it, and an opaque background of its own is left only on the sticky cells.