shadcn.io is not affiliated with official shadcn/ui
Project Tasks Table Block for React
A sprint tracker where each task's status is a select in its row, rolled up in a band of status counts and a done bar, with subtasks, assignees and due dates worked out from a fixed date.
Installation
Overview
Change a task's status where you read it, with this project tasks table for React with Base UI. Eight tasks of a sprint tracker sit in a native table where the Status cell is a Native Select: Backlog, In progress, In review or Done. Changing it rolls up in the band under the table, which counts each status and draws a Done bar ("3 of 8 done"). Under each title are its subtasks ("2 of 5 subtasks", all of them once the task is Done), the people on it are a static stack of initials, and the due date is worked out from a fixed "today" ("Due in 3 days", "Overdue by 1 day"; a Done task is simply Done). A polite line reads out each change and how many tasks are overdue. The rows never move, the table never changes height, and on a phone the people column folds away and the due date moves under the title. It's built from a native table, Native Select, Avatar, Progress and Guides. For sprint boards, task lists, launch plans and any work that moves through stages.
FAQ
How does the roll-up work?
The status of every task lives in one object, and the counts, the Done bar and the overdue total are all worked out from it on each render, never typed twice. Change a select and the band, the bar and the polite line follow in the same update.
How are the due dates worked out?
The file has one typed AS_OF date. The whole days between it and each task's due date become "Due in 3 days", "Due tomorrow", "Due today" or "Overdue by 1 day", and a Done task shows "Done" instead, so finishing a late task clears its overdue weight. Overdue is also a heavier font, not only a word.
Why a native select and not a custom menu?
Four fixed options in a table row are exactly what the platform's own select does best: it works with the keyboard and screen readers, opens a picker on a phone, and keeps the row's height. Each select is named "Status of" followed by the task.
What about phones and tablets?
Below the medium breakpoint the People column is hidden, and below the small one the Due column folds into the line under the title, after the subtasks. The status select stays in its own column.