shadcn.io is not affiliated with official shadcn/ui
Sortable Directory Team Block for Radix UI
A document-signing company's ten people in a table whose cells share their hairlines, sorted by name, department or tenure from the header, with a tenure bar and a live sort announcement.
Installation
Overview
A sortable team roster for React with Radix UI, for Signetly, a document-signing company. A centred header sits over a table of ten people whose cells share their hairlines from rail to rail. Name, Department and Joined are header buttons: press one to sort by it, press it again to reverse the order, and the sorted column shows an arrow and says so to assistive technology. "Joined" is a tenure in company years ("Year 4", never a calendar year) with a thin bar behind it, and sorting by it puts the longest tenure first. After each sort the rows fade back in. On a phone the header gives way to a Sort by group, each person becomes a two-line row, six are shown and a Show all button opens the rest. It's built from Table, Toggle Group, Avatar, Button and Guides, with CSS transitions and your theme's tokens for every colour. For an about page or an internal directory that needs one ordering control. There are no filters; team-interactive-directory has those. The people are invented.
FAQ
How do I change the people and the sort options?
Edit PEOPLE at the top: a name, a role, a department and a year, the year of tenure. The longest tenure sets the bar's full width. The sortable columns are listed in COLUMNS; each key needs a case in the small compareBy function. Add a column by adding a key there, a header cell and a cell per row.
How does a sort work, and what does 'ascending' mean for Joined?
Pressing a column sorts by it from the start of its order; pressing the sorted column again reverses it. Name and Department run A to Z, then Z to A. Joined is a tenure, so its first order is longest tenure first, then newest first. Ties fall back to the name.
How is the sort announced?
The sorted header cell carries aria-sort (ascending or descending), the other sortable columns carry none, and a polite status line reads the result, such as "Sorted by Department, A to Z". Focus stays on the header you pressed.
Each sortable header holds a real button inside its cell.
What happens on a phone?
The header row is hidden and a Sort by group (Name, Department, Joined) sits above the list. Press the selected button again to reverse the order, or another to switch. Each person is two lines, with the role and department under the name and the tenure at the end; six are shown and a Show all 10 button opens the rest.