Videographer Project Table Profile Block for React

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.

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.

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.

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.

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.