shadcn.io is not affiliated with official shadcn/ui
Department Rate Table Awards Block for Ark UI
A ruled table of eight departments with their headcount, awards won and awards per ten people, drawn as a bar beside the number, sorted from the highest rate down with a foot row for the whole company.
Installation
Overview
A department table for React with Ark UI. A start-aligned header sits over one ruled table of eight departments: the headcount, the awards their people won in 2025 and the awards per ten people, worked out from those two figures and drawn as a bar beside the number. Rows run from the highest rate down with ties broken A to Z, and the rate column is marked as sorted descending. A foot row gives the whole company. The standard counts per head, so a small department counts as much as a large one. The bars are drawings and every figure is in text. On a phone the bars drop out and the table keeps four short columns. The page's rails and top rule come from the Guides spine. It's built from Guides, a native table and CSS. The standard, the departments and the figures are made up for the example.
FAQ
How do I change the departments?
Edit DEPARTMENTS at the top of the file: a name, the number of people and the awards won. The rate per ten people, the order of the rows, the bar lengths, the totals in the foot row and the sentence in the header are all worked out from that list.
How is the rate worked out?
Awards divided by people, times ten, rounded to one decimal. Rows are ordered by the exact ratio, not the rounded one, so two departments that show the same rate are tied for real, and a tie goes A to Z. The foot row uses the company totals, not an average of the rows.
Can I sort the table by another column?
Not as shipped: the table is fixed at the rate order the standard publishes, and its column header says so with aria-sort. If you need sorting, make the headers buttons and sort the rows with a comparison like byRate; the rest of the block does not depend on the order.
What changes on a phone?
The bar column drops out and the number stays, so four short columns fit without scrolling. The table sits in a focusable region, so a keyboard can scroll it if a long department name ever pushes it wider.