Sortable Selectable Table
Type-aware sorting with aria-sort, a header checkbox that goes properly indeterminate, and selection that survives a re-sort.
All blocksProduct
Data Tables
8 blocks in this category, each rendered live below. Open any of them for the full source and a copy button.
A block is one finished section of a page — a pricing table, a hero, a footer.
Table Search & Filter Bar
Search, filter count and view switch, with active filters shown as removable chips so a filtered table never looks unfiltered.
Pagination With Page Window
Page size, range summary and a fixed-width number window that stays the same size from page 1 to page 200.
Expandable Detail Rows
Rows that open into a full-width detail panel via colSpan, with aria-expanded and aria-controls wired to the detail row.
Column Show, Hide & Reorder
Reordering that works from the keyboard rather than by drag alone, pinned columns that cannot be hidden or moved, and a guard so the last visible column cannot be unchecked into a blank table.
Bulk Action Bar
The selection bar that asks the question most tables skip: this page, or all 1,284 rows the filter matches. Typed confirmation above a threshold, an undo with the window counting down, and a select-all that names its own scope.
Inline Editable Table
Edit cells in the grid with staged changes, per-cell validation, the original value kept beside the attempt, and a save that counts what is still pending.
Grouped Table with Subtotals
Collapsible group headers that carry their own subtotals while collapsed, with a grand total that sums every row rather than only the visible ones.