Sortable Results Table Testimonials Block for React

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.

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.

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.

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.

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.

Yes. Numbers and changes are wrapped in bdi, so −58% stays −58%, and the first column, the number columns, the bars, the band's padding and the split divider all use logical alignment, so the table and the quote swap sides.