shadcn.io is not affiliated with official shadcn/ui
Grouped Transparency Report About Block for React Aria
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 React Aria, 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.