Department Rate Table Awards Block for React

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.

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.

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.

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.

Yes. It has a caption for screen readers, a header row with column scope, the department as a row header and the foot row as a real table footer. The bars are hidden from assistive technology: the rate is in the cell as text.

No. Orbitwell, the Quincewood Standard and all of the figures are invented. Replace them with your own headcount and awards.