shadcn.io is not affiliated with official shadcn/ui
Grouped Transparency Report About Block for React
A payroll co-op's report of seven measures over four quarters in Financial and Operational groups, a sparkline on every row, footnotes, and a quarter picker that rings one column.
Installation
Overview
A transparency report for React with Base UI, written for Quillpay Co-op, a fictional payroll service owned by the employers who use it. A centred header carries a quarter picker, Q1 to Q4, as one choice that can't be switched off. Under it a framed report table groups seven measures into Financial and Operational, each group opened by a band, with the last four quarters as columns, newest last. Every row ends in a small line that draws its four readings, the last segment at full weight. Choosing a quarter rings that column and tints it, and a polite line says which one. Footnote markers in the first column link to a numbered list under the table. The first column stays put while the table scrolls sideways on a phone. It's built from a native table, Toggle Group and Guides, with your theme's tokens for every colour. For an about page, a members' report or an annual review. The figures are example data.
FAQ
How do I change the measures, the groups and the quarters?
GROUPS holds the groups, each with its measures: a label, the number of digits to write, one reading per quarter and an optional footnote number. QUARTERS names the columns, and NOTES is the footnote list. The table, the ring, the sparklines and the footnote links all read from those three; there are no years in them, only the quarters of the last financial year. The figures are example data.
How does the quarter picker work?
It is a single choice: pressing the quarter that is already on does nothing, so a column is always ringed. The ring is drawn on the cells of that column, closed at the start and end of each group, and its cells get a light tint. A visually hidden polite line says which quarter is ringed, and the buttons themselves report their pressed state.
Why is the table written out in plain HTML?
A caption, a column and row-group scopes, a pinned first column and a ringed column all need a real table. The code is the same on every base, so the table does not change with the library you pick; only the Toggle Group does.
Are the little lines readable by a screen reader?
Each line is an image with a text name that gives the first and the last reading, and the four readings themselves are in the cells beside it. The line is drawn left to right in every language, so it never mirrors.
Related
- Pro
A framed table of seven company figures for an open-startup tracker: last quarter, this quarter, the computed change and a thin bar toward each target, sortable by metric, change or progress.
- Pro
Growth Heat Table About
NumbersFive years of growth in one framed table: revenue, customers, team and NPS by year, each cell shaded by its size against its row, with a closing row of year-on-year revenue growth.
- Pro
Headcount Stacked Chart About
Team and officesHeadcount over six years as stacked columns by department, where choosing a year (focus, hover or tap) lists its departments with counts and shares.
- Pro
Response Times Matrix About
Support and contactSupport promises as a framed matrix of channels by plan, each cell giving the promised first response and last quarter's median, with the Enterprise column ringed and a status dot per channel.
- Pro
Stacked Total Impact About
NumbersA total built from its parts for a scheduling tool: a framed lead with the hours returned over a stacked bar and a legend whose numbers add up to it, and a band of three smaller impact cells.
- Pro
Sortable Sparkline Tile Grid Stats
KPI bands and tilesSix web-vitals tiles in one hairline frame, each with a fourteen-day line, its low and high marked by ticks, and a Sort by switch that re-orders them by change, budget used or volatility.