shadcn.io is not affiliated with official shadcn/ui
Compare Rows Table Block for React
A sales table where you tick up to two quarters and a band closing the panel compares them metric by metric, with the signed difference and the change as an arrow, a sign and a word, plus Swap A and B.
Installation
Overview
Put two rows side by side without leaving the table, with this compare rows table for React with Base UI. A framed panel holds a native table of six quarters from a sales report (revenue, orders, average order and refunds), each with a Checkbox. Pick up to two: the first is A and the second B, and the band that closes the panel compares them metric by metric. Every cell shows the change in percent as an arrow, a sign and a word ("Up 5.7%"), never colour, with the signed difference and the two values underneath. Once two are picked the other boxes are disabled and the line above the table says so; unticking one frees them. Swap A and B turns the comparison round, and with fewer than two quarters the band keeps its shape with dashes and the line asks for a second quarter. It's built from Checkbox, Button and Guides, with a CSS entrance only. For reports, plan and version comparisons, and any table where the question is "what changed between these two".
FAQ
How is the limit of two kept?
The picks are an ordered list of at most two ids. Ticking a third is impossible, because once two are picked every other box is disabled, and the line over the table says "Untick one to change". Unticking the first pick makes the second pick A, so the letters always follow the order you chose in.
Where do the differences and percentages come from?
Revenue, orders and refunds are typed per quarter and the average order is derived from revenue and orders, in cents. The band computes the difference and the percentage change from those same numbers with small helpers, so the table and the band always agree. A drop is shown with the real minus sign, a rise with a plus, and an unchanged value as "No change".
Why doesn't the band change height when I pick?
It always has the same four cells. With fewer than two quarters picked they show dashes and the heading shows no names, so picking only fills text in. The table rows never move either: the letters A and B take a reserved slot that is only unseen until used.
Is it accessible?
The table has a caption and column headers, each box is named "Compare" and the quarter, and picked rows say "A" or "B" for screen readers as well as showing it. The line over the table is the one polite status: it announces each pick and, once two are picked, adds one sentence with all four metrics ("Revenue up 5.7%, Orders up 3.0%, …"). The comparison is a list named after the two quarters.
How does it look on a phone?
Average order and Refunds drop out of the table, since the band shows them for the pair you picked, and the band's four cells become two by two. The quarter names leave the band's heading but the letters stay, and the rows show which is A and which is B.
What stays local, and how do I use my own periods?
The six quarters are typed in QUARTERS; nothing is fetched and the picks are not saved. Replace the array with your periods and metrics (add a key to METRICS and a case to measure and show), or fetch the pair you pick and fill the band from the response.
Related
- Pro
Row Selection Table
Select and actA stock list with a checkbox on every row, a head checkbox that shows a dash when only some are ticked, Shift-click range select and a live line that adds up the price of the ticked rows.
- Pro
Bulk Actions Table
Select and actA contacts table whose head checkbox ticks the page, a strip that offers to select all 48 contacts across pages, a toolbar that swaps to Archive, Tag and Delete at the same height, and an Undo receipt.
- Pro
Baseline Comparison Table
Totals and comparisonFive camera bodies compared against one you pick: every figure shows its own value and, under it, a signed difference or Same or Different against the baseline, with sticky spec names and grouped rows.
- Pro
Sortable Members Table
Sort and searchA members table whose column heads are buttons: press one to sort, again to reverse, a third time for the original order, with aria-sort on the active head, ties settled by name and a spoken line for each result.
- Pro
Table Footer With Totals
Totals and comparisonA timesheet table with a real footer row whose totals (hours, average rate, amount, paid and pending) are worked out from the rows shown, so a client filter changes every figure.
- Pro
Table With a Summary Footer Chain
Totals and comparisonA hire quote whose footer works down from the subtotal through a percentage discount, a tax rate, a flat delivery charge and the total, each showing its formula.