shadcn.io is not affiliated with official shadcn/ui
Sort Builder Segments Table Block for React
A customer segments table ordered by a two-rule sort builder: pick a column and a direction for the first rule and for the tie-break, see the order as a 1 and a 2 on the heads, and Reset to start again.
Installation
Overview
Order a table by more than one column, with this sort builder for React with Base UI. One framed panel with a plus mark on each corner is split by a solid divider: at the start a native table of eight customer segments with their criteria as outline Badges, the customers, the average revenue and the growth as an arrow, a sign and a word, and at the end a builder that reads "Sort by Customers, high to low, then by Growth, high to low". Each of its two rules is a Native Select of columns and a pair of Toggle Group buttons for the direction, with words that fit the column (A to Z for names, low to high for numbers). Ties on the first rule fall to the second and then to the segment's name. The table's heads are not buttons: the builder is the control, so they only show which rule sorts them, a 1 or a 2 beside an arrow, and the first rule's head carries aria-sort. A sentence under the builder says the order in words, and Reset puts the first choice back. On a phone the builder goes above the table and the criteria and average revenue fold under the segment's name. It's built from Native Select, Toggle Group, Badge, Button and Guides, with a CSS entrance only. For CRMs, reports and any table people want to rank by two measures.
FAQ
How do I fill it with my own segments and columns?
Edit SEGMENTS: each has a name, its criteria tags, the customers, the revenue per customer and the growth in percent. FIELDS lists the columns the builder can sort by and whether each sorts as words or numbers, which decides the words on the direction buttons. To sort by another column, add a field, a case in numberOf (or gapOf for text) and a head with SortedHead. The sentence under the builder, the numbers on the heads and the order of the rows come from the two rules, so nothing is typed twice.
How do the two rules and the tie-break work?
Rows are compared on the first rule. Rows that tie, such as two segments with 428 customers, are compared on the second rule, and any that still tie fall to the segment's name, so the order is always the same. The other rule's column is disabled in each menu, so a column is never sorted twice. The direction buttons always keep one pressed.
What stays local, and how do I sort on a server?
Everything is in the page: sortRows reorders the typed segments and nothing is saved. For a long list, send the two rules (customers:descending,growth:descending) to your API from the handlers, render the rows it returns and keep the builder, the heads and the sentence as they are. To remember a person's choice, store Rules in your own settings and pass it as the starting state.
Is a table sorted from outside accessible?
Yes. The builder is a named group of real controls: two labelled menus and two named toggle groups, all reachable by keyboard, and a polite status line, present from the start, reads the new order after every change. The table is native, with a caption, column heads and a row header for each segment. The first rule's column has aria-sort; the second rule's column says "sorted second" in text for a screen reader, since a table should name one sorted column only. Growth is an arrow, a sign and a word, never colour alone.
Does the table move when the order changes?
No. The same eight rows are rebuilt in the new order and each keeps its lines, and a head keeps the space for its 1 or 2 mark even when it is unsorted, so no column shifts. The sentence under the builder reserves three lines for the same reason.
How does it look on a phone?
The builder sits above the table at full width, with the table's top rule under it. The table keeps Segment, Customers and Growth; the criteria and the average revenue ("Weekly active, 10+ seats, $412 a month") fold under the segment's name, and the growth's word is spoken but not shown.
Related
- Pro
Sortable Members Table
Sort and searchA members table whose column heads are buttons: press one to sort, again to reverse, a third time for the original order, with aria-sort on the active head, ties settled by name and a spoken line for each result.
- Pro
Effective Priority Table
Rich cellsA ticket queue where a switch raises any ticket due within two days by one level, shown as drawn bars, a word and a raised-from note, and the Priority head sorts by that effective rank.
- Pro
Chip Filters Table
Sort and searchA bug table beside a rail of chip filters for priority and status: chips in a group are or, the groups are and, every chip counts what it would show, and an empty state clears them all.
- Pro
Searchable Catalogue Table
Sort and searchA library catalogue table with a search field and an availability menu: typing keeps the titles whose name or author holds the words and marks them, the foot says how many match, and an empty state under the head clears the search.
- Pro
A table of services in a tinted frame with sortable column heads, 30-day uptime strips, response times and error rates, and a mark and a word on any service that is down.
- Pro
Dependency Updates Changelog
Packages and versionsA table of eight dependency updates in two groups, Production and Dev: package, old and new version, the kind of bump and a three-pip risk, with sortable heads that reorder the rows inside each group.