shadcn.io is not affiliated with official shadcn/ui
Table View Task List Block for Radix UI
Ten launch tasks in a sortable table with checkbox, status, priority, due date and assignee, header buttons that sort with aria-sort, and a Sort by select that does the same on a phone.
Installation
Overview
Give a task list the order of a spreadsheet, with this table view to-do list for React with Radix UI. A real table has a Checkbox column and Task, Status, Priority, Due and Assignee columns; every heading is a button that sorts by it, the sorted heading carries aria-sort and an arrow, pressing it again reverses the order, and the status line says "Sorted by Due, earliest first". Status is a glyph and a word (To do, In progress, Blocked, Done) rather than a color, and the assignee is an initials Avatar with a name. The order is taken when you press a sort, so ticking a task never moves it under your pointer. On a phone Status, Priority and the assignee fold into the task's second line and a Native Select called Sort by takes over from the headings. There is no inline editing or filtering here. The frame is ruled by Guides, and the only motion is a CSS entrance. For project trackers, launch checklists and any list people want to scan by column.
FAQ
How do I load my own tasks?
Replace START. Each task has an id, a title, an assignee, an ISO due date, a numeric priority (0 Low to 2 High) and a numeric status (0 To do, 1 In progress, 2 Blocked, 3 Done). The columns, counts and sort lines are all worked out from those and the fixed AS_OF day.
What stays local, and how do I save for real?
Everything. Ticking changes a task between Done and To do on the page and nothing is sent, so the table resets on reload. In your app write the status from toggle to your own store, and sort on your server for long lists.
How does the sort behave?
Each heading's first press sorts in its natural direction (earliest due date, high priority, A to Z) and a second press reverses it. The sort is stable, so equal rows keep their earlier order, and it is applied once when you press, not on every render, so a tick never reorders the rows.
Is it accessible?
It is a native table with a caption, column headers with scope, task titles as row headers and aria-sort on the sorted heading. The table sits in a labelled scroll region you can reach with the keyboard, each checkbox is named by its task, and a polite status message announces every sort and tick.