Credentials Table Team Block for React

Edit CREDENTIALS at the top of the file. A credential is a name, a role, a certification, an issuing body, a category and an expires date as an ISO string; the headcounts on the filter and the "due within a year" figure in the header are counted from the same list, so adding a row needs no other change. The issuing bodies in the example are invented: use the real body's name for a real credential.

It is worked out from the expires date and a fixed AS_OF date in the file, never from the clock, so the page reads the same on the server, in the browser and in a screenshot. The header says "Dates as of October 2026" to match. To show the time remaining from today instead, replace AS_OF with the current date after the page loads (an effect that sets a state), and render dashes until then.

It is a group of toggle buttons named Category, with exactly one picked at all times. Tab moves into it and the arrow keys move between the options; each one is read with its count ("Security, 3 credentials"). A polite status line reads the result ("Security first: 3 of 9 credentials") without moving focus, and the picked category's rows also come first in the table itself. On Base UI the toggles are buttons with a pressed state.

Hiding rows would shrink the table and move everything under it. Instead the picked category's rows come first, in their usual order, and the others stay below them with a light tint and muted names; every word keeps AA contrast in light and dark themes. The block keeps one height whatever you pick.

Below sm the Issuing body and Valid until columns move under the certification, so two columns remain and nothing scrolls sideways. The table shows the first six rows and a Show all 9 button; the button says whether the table is expanded and keeps one label. The category filter scrolls sideways from rail to rail when its options don't fit.

Yes: a native table with a caption, column headers and the holder's name as each row's header, the same on all seven targets. The date is a time element with its ISO value, and its text is preceded by a hidden "Valid until" so it reads in full.