Cards & layout

Click a column to cycle sort ascending, descending, off; the rows slide to their new order instead of snapping. Drag the divider on a header edge to resize, with a live guide line. The Requests and Cost columns carry a proportional bar behind the value, so the table doubles as a chart. Select rows for the floating action bar, switch density, or hit Reload to see the skeleton state.

The toolbar owns nothing but state you pass in: a debounce-ready search value, a selected-values map per faceted filter, and a hidden-columns list. Faceted filters open a multi-select popover with per-option counts, every active choice drops into a removable pill below, and Reset clears search and facets in one call. The View menu toggles column visibility. Pair it above Data Table or any list.

A plain semantic table, one caret per row. Expansion is a set of ids, so more than one row can be open at once (pass singleOpen to change that); the detail row spans every column and grows by height with a reduced-motion path that skips straight to open. The panel content is a render prop, here a two-up of line items and shipping address, but it takes any node including a nested table.

A treegrid, not a plain table: the nested tree is flattened to visible rows on every render, indentation plus a guide line shows depth, and each folder row rolls up the summed size of everything beneath it so a collapsed folder still reports its weight. Focus a row and use the arrow keys, right opens or steps in, left closes or steps out to the parent, up and down move between rows.

With maxHeight set this becomes a frozen-pane grid: the Rep column, the View column, and the header row all stay put, so a trackpad diagonal swipe moves through the quarters and down the rows at once. Each of the four edges carries a shadow that only shows while there is actually content scrolled behind it, measured from the scroll position. Leave maxHeight off and it goes back to horizontal-only, growing to fit its rows.

Click any cell to edit it inline. Enter commits and drops to the cell below, Tab commits and moves right, Escape throws the edit away. Changes stage on the row rather than writing through, so a touched row turns amber and shows Save and Revert; the Rate column runs a range check that blocks Save and shows the reason under the cell until you fix it.

A feature matrix that stays readable while it scrolls: the feature column is pinned left, the recommended plan keeps its tint and badge down the whole table, and rows sit under sticky section headers. Cells take a boolean, a partial-support marker, or free text, and every state is drawn as an icon plus a label so it never leans on color alone. Header row sticks to the top; the whole thing scrolls sideways on a phone rather than squashing.

This is the library Data Table with five columns wired up, not a new table. The Views column uses the bar accessor for the fill behind the number, sorting and the row reorder come from Data Table, and only the sparkline and the arrow-plus-percent trend cell are new. The rank column is fixed to each row standing by views, so sorting by trend keeps the ranks readable.