shadcn.io is not affiliated with official shadcn/ui
Sortable Results Table Testimonials Block for Radix UI
A results table of five customers with a before, an after and the change between them, whose column headers sort it, in a band between the rails: a split divider sets the quote of whoever is at the top of the table apart from the table, with + marks where it meets the band's rule.
Installation
Overview
Let visitors rank your customers' results themselves, in a testimonials section for React with Radix UI. A compact header (Release times, before and after Quillon, a fictional component kit) sits above a closing band drawn between the page's rails. On the start side a table lists five customers with one measure, median days from commit to release, before and after, and the change between them with a small foreground bar. Every column header is a sort button: choose it to sort, choose it again to flip the order, and a status line above the table says how it is sorted. A split divider, with + marks where it meets the band's top rule, sets the quote of whoever is at the top of the table on the end side, so sorting by change puts the biggest win's voice first. Below lg the quote stacks under the table. It's built from Table, Button, Avatar and Guides with CSS entrances that stay still under reduced motion and only your theme's tokens; the block has no primary control, because sorting is the point. For landing pages and case-study hubs where the numbers are the story and a little control makes them feel real.
FAQ
How do I use my own customers and numbers?
Edit CUSTOMERS at the top of the file: a company, a before and an after in whatever you measure, and a quote with its person and role. The change column is worked out from them with whole-number maths (Math.round of the difference over the before), with a real minus sign, and the bar under it uses the same number. To change the measure, edit the heading text, the table's aria-label and the numbers. Only put real results here.
How does sorting work?
The first click on a column sorts it ascending, a second click flips it, and a click on another column starts that one ascending. For the change column ascending means the biggest drop first. The Reset button puts the table back to its starting order, and is disabled while it is already there. Rows are sorted in the component's state, so for a long list you would sort on the server and pass the rows in.
Why does the quote change when I sort?
The quote beside the table belongs to whoever is in the first row. Every quote is in the page at all times, stacked in the same space, and only the top row's is visible: the others are hidden from sight and from screen readers, so the section never changes height when the order does.
What do screen readers and keyboards get?
It is a real table with a name, column headers and a customer in each row's header cell. The sorted column's header carries aria-sort, and the status line is a polite live region, so each new order is announced as "Sorted by change, biggest drop first". Every header is reachable by keyboard and sorts on Enter or Space.
Each header holds a ghost Button inside its th, so Tab moves from one header to the next.
How does it fit on a phone?
Below sm the avatars and the change bars are hidden and the cell padding tightens, so all four columns fit in 320 px with the customer name wrapping to two lines. Unused sort arrows are hidden too; the sorted column keeps its arrow. The quote stacks under the table with its rule drawn between them, and the small label above the quote is kept for screen readers only, so the quote is on the first screen.