A small collection. A solid starting point.
7 blocks found
A clear home for your data. Sort contacts and select rows with a lightweight, semantic table.
Adapted semantic table with local sorting and synthetic contacts. Not the full TanStack DataTable.
Curated adaptation. Synthetic data only. No production APIs.
Give every column its space. Drag a header edge, or focus the separator and use the keyboard within safe bounds.
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.
Keep the context close. The title column stays visible next to the select column while the rest scrolls.
Adapts the sticky primary column: the 40 px select column pins at left 0 and the first data column at left 40 px, with matching backgrounds so rows stay readable on horizontal scroll.
Curated adaptation. Synthetic data only. No production APIs.
Your order of things. Move columns with explicit menu actions.
Adapts move-left/move-right column-order actions as explicit header-menu items. Movement is menu-only and remains local to the preview.
Curated adaptation. Synthetic data only. No production APIs.
A little less back and forth. Edit team, project, status, and titles right in the row — saved locally only.
Adapts a single-cell quick-edit pattern: an inline select with search for option columns and inline text edit for titles, announced as saved locally. There is no production spreadsheet grid; this mirrors the quick-edit pattern only. No PATCH, no APIs.
Curated adaptation. Synthetic data only. No production APIs.
Keep the context. Explore contact details in a floating panel without leaving the page.
Preserves the floating 12px inset and 544px maximum width. Synthetic detail composition, not a production quick view.
Curated adaptation. Synthetic data only. No production APIs.
Small footprint, clear direction. A navigable hierarchy for your application.
Semantic breadcrumb adapted with local demo navigation. Does not include a production route resolver.
Curated adaptation. Synthetic data only. No production APIs.