shadcn.io is not affiliated with official shadcn/ui
Filterable Patents Portfolio About Block for React Aria
A framed table of seven patent filings for a lab-notebook tool with a status filter whose buttons carry their counts, category badges and filing years, never a calendar year.
Installation
Overview
A patent portfolio for React with React Aria, written for Notebench, a fictional lab-notebook tool. A start header carries a status filter at its end: All, Granted and Pending as one choice that can't be switched off, each button showing its count. Under it a framed table lists seven filings: a reference in the PAT-0142 style, what the invention does in a phrase, its category as an outlined badge, its status with a filled dot for granted and an open one for pending, and the year of Notebench it was filed in ("Year 4", never a calendar year). Choosing a status filters the rows, and the frame keeps its full height with a count line at its foot, so nothing below it moves. The reference column stays put while the table scrolls sideways on a phone. It's built from a native table, Toggle Group, Badge and Guides, with your theme's tokens for every colour. For an about page or a legal page. The references and inventions are invented.
FAQ
How do I change the filings and the statuses?
Edit PATENTS at the top: each has an id (the reference), a title, a category, a status of granted or pending and the filed year of the product. The counts in the buttons are computed from the list. The references are invented and match no real patent.
How does the filter work, and how is it announced?
It is a single choice, so one status is always on. The table shows only the matching rows, and a quiet line at the foot of the frame reads the result politely, such as "Showing 4 of 7 filings, granted only". The frame keeps the height of the full list, so the page below never shifts.
Is the status only a colour?
No. Granted and Pending are written out beside a filled or an open dot, and the dot is decoration. There is no status colour: the page's tokens carry everything.
Why is the table plain HTML?
It needs a caption, a row header per filing and a pinned column, which a real table gives on every base. The code is the same on every base; only the Toggle Group differs. The Toggle Group disallows an empty selection, so pressing the pressed button does nothing.