Grouped Comparison Table Pricing Block for React

Edit the two arrays at the top of the file. PLANS holds each column's name, description, monthly price (null shows "Custom"), call to action with its href, and whether it's popular, with its badge. GROUPS holds the categories, each with its features: a feature has a name and a value per plan id, true for a check, false for a dash, or text for a limit such as "100M". The counts in the headers are computed from those values (a limit counts as included), so they never drift. Add a plan and TypeScript points at every feature that still needs a value for it.

The first useState holds the names of the open groups: start it with [GROUPS[0].name] for one, [] for all closed, or GROUPS.map((group) => group.name) for all open. The Expand all button reads "Collapse all" once every group is open, and the group buttons keep working in any state. Keep one group open when the table is long: a page that starts with five closed rows says nothing, and one that starts with a single open group shows what the rows look like.

Each call to action is a link: point each plan's href at your signup or checkout with the plan in the address (/checkout?plan=business), and Enterprise's at your sales form. For usage-based API pricing, your billing provider's metered prices take it from there. The link is render={<a href={plan.href} />} on ShineButton, with nativeButton={false}.

Each group header holds a real button, with aria-expanded saying whether its rows are shown, so Tab reaches it and Enter or Space toggles it; the rows of a closed group aren't in the page at all. Plan names are column headers, feature names are row headers, and every check and dash carries hidden text. The counts in the header are read in full ("Developer includes 4 of 8 Security features"), prices are read with their period and each call to action says which plan it's for.

A plan switch (a radio group) appears over the table with the best value plan selected, and the table shows the feature names beside that one plan's column, so the call to action is in the first screen and nothing scrolls sideways. The group headers stay and show that plan's count. The full table and the one-plan table are rendered from the same data and share the open groups, and the one not in use is display: none.

Use a grouped table when buyers check dozens of limits and features across three or more plans, as developers do with rate limits and authentication methods before they integrate: folding keeps the page short and lets each reader open only their group. Plan cards suit two or three plans with short feature lists, where the decision is quick and mostly about price.