Sort Density Toolbar
Working sort and density controls wired to a demo table that responds.
Working sort and density controls wired to a demo table that responds.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Sort Density Toolbar is the table controls bar wired to a real demo table, sort chips (Newest, Oldest, A to Z) with aria-pressed that actually reorder the three report rows, a ToggleGroup switching between Comfortable and Compact that changes row padding live, and a column visibility button showing 9 of 12 columns. The table shows Q2 revenue, Activation funnel, and Churn cohorts with status badges and last edited timestamps.
Sort options and report rows are const arrays; useState drives sort key and density. The footer note explains that compact only tightens padding and nothing reflows on switch, which is the guarantee users need before they trust the toggle.
Reach for this block above any data table where users have sorting preferences and varying screen density needs, wired to your table sort state and user preferences endpoint. Persist density preference to localStorage or a user settings API so the choice survives page loads.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the reports table toolbar. Other sort and density toolbars:
Tip: compact tightens padding only; if column widths shift or text truncates differently, users cannot trust the toggle and will leave it alone.