shadcn.io is not affiliated with official shadcn/ui
Survey Results Crosstab Table Block for React
A survey crosstab of answers by plan (Free, Pro, Team, All) with n shown on each column, a mode toggle for column percent, row percent or counts, a question menu for three questions and four solid shading steps.
Installation
Overview
Break one question down by who answered it, with this survey crosstab for React with Base UI. Inside a hairline frame with a plus mark on each corner, a first band holds a Native Select for one of three Pollbarn questions and a Toggle Group with Column %, Row % and Counts. Under it a native table lists four answers down the side and the plans across, Free, Pro, Team and All, each headed with how many people answered ("n = 212"). Every cell shows a large figure and its partner beneath it: in Column % the share of that plan's respondents with the count under, in Row % the share of that answer that came from each plan with the count under, and in Counts the number with the column percent under. Percentages are rounded by largest remainder so a column or row that should add to 100 does, and four solid steps of the text colour shade the cells. A line says what the mode means. It is built from Native Select, Toggle Group and Guides. For survey tools, research summaries, cohort comparisons and any table that compares groups of different sizes.
FAQ
What do the three modes calculate?
Column % divides each count by the size of its plan, so Free and Team compare fairly despite different sizes. Row % divides by the answer's total across plans, showing where each answer came from. Counts are the raw numbers. In every mode the partner figure under the large one is the other view, and the All column follows the same rule (for Row % it is always 100%).
Why do the percentages always add to 100?
Rounding each cell separately can leave a column at 99 or 101. sharesOf rounds every share down, then gives the missing points to the cells with the largest remainders, so each column or row adds to exactly 100 and the same data always rounds the same way.
How do I use my own questions and segments?
Edit QUESTIONS (a title and answers, each with one count per segment) and SEGMENTS (a label and how many people answered). Keep each answer's counts in the order of the segments, and make each segment's counts for a question add up to its respondents. The All column, shading and percentages are derived. Keep every question to the same number of answers so the table keeps its height.
How are the cells shaded?
By the large figure in each cell against the largest large figure in the table: four equal bands from the lightest to the darkest step of the text colour, with the All column unshaded. The figures are always printed, so the shade only helps the eye. The legend says fewer to more.
What stays local, and how do I wire real data?
The answers are constants and the question and mode are two useState calls. To use real responses, aggregate them into counts per answer and segment on the server and pass QUESTIONS in; percentages are derived. For a small base such as under 30 respondents, show the count and say so in the head.
Related
- Pro
A regional revenue pivot of five regions by four quarters with row and column totals, shaded in five solid steps against the whole table, each row or each column, with the highest cell outlined and a legend.
- 1212Pro
Sort Builder Segments Table
Sort and searchA customer segments table ordered by a two-rule sort builder: pick a column and a direction for the first rule and for the tie-break, see the order as a 1 and a 2 on the heads, and Reset to start again.
- 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
Diverging Bar Survey Results Reviews
Survey scoresFour survey statements as cells with overshoot, each with a diverging five-step agree and disagree bar, a rolling percent that agree, the number of answers and three written answers behind a Collapsible, re-derived by a toggle between everyone and long-time subscribers.
- 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.