Filterable Bill of Materials Tech Stack Block for React

Edit GROUPS at the top of the file: each group has a name and its items, and each item a name, a version and a use. The field's label, its placeholder and the count in the header (TOTAL) are counted from the groups, so "Filter 24 technologies" is always right. Keep a version as text: a standard's number such as "RFC 9114" works as well as "1.86".

It matches anywhere in a row's name, use, version or layer name, ignoring case, so "cache" finds the whole Cache layer and "2.0" finds every version 2.0. The matched letters are marked. The Clear button inside the field and the Escape key both empty it and keep focus in the field; when nothing matches, the button in the empty state does the same.

It is a native table with a caption, column headers with scope="col", each technology's name as a row header, and each layer's band as a column-group header. The scrolling frame is a focusable region with a name, so a keyboard user can scroll it with the arrow keys. The count under the field is a polite status that reads "9 of 24 match" as you type.

Twenty-four rows plus six bands would make the block taller than two screens, and a filter that shortened the list would pull everything below it upwards. A fixed-height frame with a sticky header keeps the block's height the same with 24 rows, with one, or with none.

The "Used for" column folds under each technology's name, so the table needs no sideways scroll at 320 pixels and shows name and version side by side. The frame is a little taller on a phone, and the field sits under the header at full width.

The header and the table fade up once on load. Filtering changes the rows at once. With reduced motion the entrance is off too.