Grouped Competitor Table About Block for React

VENDORS names the columns, Junctionly first. GROUPS holds Core, Security and Support, and each feature has a name, a yes or no for every vendor, and a note that is empty when the row has none. The footer counts the yes cells, and the sentence in the header uses Junctionly's count. Add a row or a vendor and both update.

The Toggle Group is one choice, and pressing the vendor that is already on does nothing, so a column stays ringed. The ring is drawn on that vendor's cells, closed at the start and end of each group, and the cells take a light tint. A visually hidden polite line names the vendor and how many features it includes.

A small button after the feature name opens a Tooltip. Hovering it, or focusing it from the keyboard, shows the note. The cell still reads Yes or No without the note, and an idle button does not put the note in the table.

The heading is the section's only h2. The table is named "Junctionly against Keelway, Flowkit and Datahaul". Group names are their own rows, feature names are the row headers, and each cell says Yes or No. The footer says how many features each vendor includes.

The toggle sits under the header and scrolls sideways if the names are wider than the screen. The table scrolls inside a labelled region that a keyboard can focus, with the feature names pinned at the start. The ring stays on the chosen column.

The header fades up once on load. The table does not. With reduced motion the fade is off. Nothing loops, and ringing a column does not move the page.