shadcn.io is not affiliated with official shadcn/ui
Survey Results Crosstab Table Block for Radix UI
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 Radix 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.