shadcn.io is not affiliated with official shadcn/ui
Compare Rows Table Block for Solid
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 Solid with Ark 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.