shadcn.io is not affiliated with official shadcn/ui
Posts Table Blog Block for React
Ten posts in a sortable table on one ruled band: title, author, date, reading time and category, with column headings that are buttons and say which way they sort.
Installation
Overview
A sortable posts table for React with Base UI, written for Kerniwick Press, a design-systems publisher. A caption for screen readers and five columns (Title, Author, Date, Read, Category) run from rail to rail under one ruled band. Each column heading is a button: pressing it sorts by that column, pressing it again reverses the order, the sorted heading says so with aria-sort and an arrow, and a polite line in the header reads the result ("Sorted by date, newest first"). Dates and reading times start with the newest and longest. A phone keeps three columns (Title, Date, Read) and folds the author and category into a second line under each title, so nothing scrolls sideways. It's a native table on every base. It's built from Guides and Badge. For publishers, editorial dashboards and docs indexes.
FAQ
How does the sorting work?
The headings are buttons in th cells with aria-sort on the sorted one. Pressing a new column sorts it in its first direction (A to Z for words, newest for dates, longest for reading times); pressing the same column flips it. Ties fall back to the title, so the order is always the same. The rows are the same elements in a new order, and the summary line is aria-live="polite".
Why a native table and not the catalog's Table?
A caption and scope on the row headers need a real table, and React Aria's catalog table is a grid without them. A native table is identical on all four bases and every port, and the first cell of each row is a th scope="row" holding the title link.
What happens to the Author and Category columns on a phone?
They are hidden below md (the columns, their headings and their cells), and each title cell repeats the author and category as a small second line. The two columns can't be sorted on a phone; sort by title, date or reading time. The table never scrolls sideways at 320 pixels.
How do I use my own posts?
Edit POSTS: a title, author, category, an ISO date, a reading time in minutes and an href. COLUMNS holds the headings and how each reads when sorted. Dates are fixed and formatted in UTC, in a short form on a phone.
Related
- Pro
Compact List Blog
Post listsTwenty posts as dense one-line rows like a printed contents page: date, title, a dotted leader and the reading time, eight shown and twelve behind a Show more button.
- Pro
Role Filter Contributors Blog
Authors and staffA press's contributors as an avatar group with a count, a role toggle (All, Staff, Guest, Editors) with a live Showing 3 of 9 line, and a captioned table of name, role badge, articles and month joined that never changes height.
- Pro
Pagination Blog
Post listsA transit-planning blog's archive as rows, four to a page over three pages, with the catalog pagination in a band at the foot, a polite 'Showing 5 to 8 of 12' line and a height that never changes between pages.
- Pro
Nested Accordion Archive Blog
Archives by dateA farm journal's archive as a nested accordion, years that open to months and months that open to posts, with counts worked out from the posts and an Expand all control.
- Pro
Drafts Desk Blog
Stats and draftsA drafts list for a writing-tools blog: each row has a status badge, a progress bar with its word count, the fixed time it was edited and a menu to edit, duplicate or archive it.
- Pro
Single Open Accordion Blog
Post listsFour dev notes as a single-open accordion: each row shows its number, title, date and reading time, and the open row reveals the dek, the byline with its category and a Read post link.