Tags Table Block for React

It filters the table to the notes that have that tag and marks the tag pressed (aria-pressed) everywhere it appears. One tag is active at a time: pressing another switches to it, pressing the active one clears it. The strip names the tag and the count, and the same sentence is the block's one polite line.

A row shows two tags, or one on a phone, and a button named like "3 more tags on Pricing page rewrite" opens a popover with the rest as the same pressable tags. Pressing one filters and closes the popover, because the table body is rebuilt. The pressed tag moves to the front of its row, so focus lands on it there; pressing the active tag again puts it back in its place, and focus goes to that row's plus button when it now sits behind it.

The table lives in a fixed-height region with a sticky head, the rows keep one fixed height, and the body is keyed by the active tag, so rows leave and return without moving anything around them. Every tag in the vocabulary is on at least two notes, so a filter can't empty the table.

Every tag is a native button with a name that says which note it is on ("design, tag on Pricing page rewrite") and aria-pressed for its state. The popover closes with Escape and returns focus to its button. Pressed tags are a solid foreground fill, never a colour, and the counts and the filter are in words.

This block filters by one tag and does not add or remove tags: that is a different control. To allow several, hold an array of tags in state and show a note when it has all of them (or any); the strip can list each one with its own remove button.

The seven notes and their tags are typed in NOTES and the filter lives in the tab. To wire it up, replace NOTES with your data, and for a long list filter on your server by the tag and render the same table from the result.