shadcn.io is not affiliated with official shadcn/ui
Course Curriculum Table Block for React Aria
A pottery course of thirteen lessons in three foldable modules where each lesson unlocks when the one before is done, with progress, time left and a Continue button that focuses the next lesson.
Installation
Overview
Teach in order, with this course curriculum table for React with React Aria. Thirteen lessons of a pottery course sit in three modules, each module a table group that opens with a row spanning the table: a button to fold it, "3 of 4 done" and the minutes it still needs. Lessons unlock in order. A Checkbox can be ticked only when every lesson before it is done, so ticking one opens the next, unticking one locks everything after it again, and a locked lesson says so in words ("Locked until Pulling up the walls is done"). The band over the table shows the progress with a Progress bar, the time left added up from the lessons not done, and the one primary, a Shine Button, Continue, which opens the module of the next lesson and puts focus on its box. Type is a glyph and a word, all four columns stay on a phone and the frame never changes height. It's built from a native table, Checkbox, Progress, Shine Button and Guides. For courses, onboarding tracks, step-by-step guides and any list with a required order.
FAQ
How does the unlocking work?
The state is one number, how many lessons from the start are done. A lesson is ticked when its position is below it, ready when it equals it and locked when it is above. Ticking a lesson sets the number to its position plus one; unticking sets it to its position, which locks every later lesson again. The checkbox of a locked lesson is disabled.
What does Continue do?
It finds the first lesson not done, opens its module if you had folded it, scrolls the frame to the row and puts focus on its checkbox, then says so in the polite line. When every lesson is done the button stays but answers in words that nothing is left.
Where do the minutes come from?
Each lesson has its minutes in the data. The time left for the course and for each module is the sum of the lessons not done, formatted as hours and minutes, so it falls as you tick.
What about phones and tablets?
All four columns stay. The type column shrinks to its glyph with the word left for screen readers, the module row keeps its count and drops the minutes, and the frame scrolls inside itself.
Is it accessible?
The table has a caption, a row header for each lesson and a group header for each module. The fold button has aria-expanded and aria-controls and is named with the module and its progress. A locked lesson's reason is text under the title, not only a lock icon, and a folded module's lessons are hidden from everyone.