shadcn.io is not affiliated with official shadcn/ui
Videographer Project Table Profile Block for Radix UI
A videographer profile as a project table with a poster: eight projects in a sortable table with a kind menu, and the row you pick fills a detail cell with a drawn poster frame, its credits and the reel runtime worked out from the rows.
Installation
Overview
Show a videographer's work as a list you can read, with this project table profile for React with Radix UI. A compact header holds the title and a Native Select that narrows the table to one kind of project, and the hairline frame under it opens on the videographer: initials, name, role and place. The start cell is a native Table of eight projects with a title, a kind, a length and the views in compact notation. Every head is a button that sorts by its column and sets aria-sort; pressing it again reverses it and a third press puts the projects back in reel order. Each title is a button that picks its row, and the end cell (under the table on a phone) shows that project: a poster frame drawn in greyscale, its kind and year, a Data List of credits (role, camera, grade) and the reel runtime, added up from the lengths of the projects shown. Nothing plays, and the poster says so. The table always has eight ruled lines, the unused ones blank, so narrowing it never changes the panel's height. It's built from Table, Native Select, Data List, Badge, Avatar and Guides, with a CSS entrance only. The videographer, projects and figures are invented. For a production-company roster, a freelancer network or any reel page.
FAQ
How do I fill it with my own projects?
Edit PROJECTS. A project has a title, a kind (commercial, documentary, music or short), its length in seconds, its views, the year, and the credits: role, camera and grade. Keep the list in the order of your reel: a third press on a head goes back to it. The reel runtime, the counts and the status line are worked out from the rows shown, so nothing is typed twice. The poster is drawn from the kind and a light number from 0 to 1 that moves its light across the frame; in an app swap the drawing for the project's still, an img.
Where is the video?
There is none: this is a drawn poster frame and the line under it says "No video in this demo". To make it real, open your player from the poster or from the title, load the video lazily, and keep the table, the credits and the keyboard behavior as they are. The views are typed numbers, not counts from a host.
How do I sort and pick?
Each head is a button. The first press sorts by that column in the order it starts with (A to Z for names, most views first), the second reverses it, and the third returns to reel order. The status line says what happened, for example "8 of 8 projects, by views, most first." A title is also a button: it marks its row with aria-current and a bar at the start, and fills the detail. If the menu narrows the table to a kind that doesn't hold the picked project, the first project shown is picked for you.
Why are there blank lines under the table?
So the panel keeps its height. A narrower kind shows fewer projects and the table keeps eight ruled lines, the rest blank like a paper log, so nothing moves when you change the menu. The blank lines are hidden from assistive technology. On a phone each line is two lines of text, the kind under the title, and the detail sits under the table.
Is it accessible?
The table is a real table with a caption, column and row headers, and sortable heads that announce their order. The scroll region is a named figure you can reach with the keyboard. The poster is decorative and hidden from assistive technology; everything it stands for is written in the title, kind and credits next to it. Numbers and titles keep their order in a right-to-left layout.