shadcn.io is not affiliated with official shadcn/ui
Table View Comments Block for Vue
A sortable native table of ten study comments with ticks, an inline Status select, a Columns popover to hide Date, Replies or Status, a density switch and a Resolve selected button.
Installation
Overview
Read and triage comments like rows in a spreadsheet, with this table view for Vue with Ark UI. It is the table of Rowmoor, a spreadsheet for researchers who code interview notes, with a compact header and one hairline frame. A toolbar band holds a Columns Popover of three Checkboxes that hide Date, Replies or Status (Author and Comment always stay), a Toggle Group for Comfortable or Compact rows and the only Shine Button, Resolve selected, which stays in place and says why while nothing is ticked. Under it the native table has a tick on every row and in the head, and sortable Author, Date and Status heads that report aria-sort; a Native Select in each Status cell changes it in place. The order is fixed when you press a head, so changing a status never makes a row jump. The table sits in a held scroll region, so no column, density or sort changes the height of the panel. On a phone the Comment, Date and Replies columns fold into the first cell. It is built from a native table, Checkbox, Native Select, Popover, Toggle Group, Shine Button, Badge and Guides, with a CSS entrance only. For research notes, review queues and any list people triage in bulk.
FAQ
How do I fill it with my own comments?
Edit REMARKS: each has an id, the author, an ISO at, the body, a replies count and a status of open, flagged or resolved. STATUSES lists the choices in the select and COLUMNS the columns the popover can hide. Dates are formatted from the ISO string with a month list, so they read the same everywhere.
How does sorting work?
Press Author, Date or Status to sort ascending, press again for descending. The head reports aria-sort, an arrow shows the direction, and the status line says what it sorted by. The order is worked out once, when you press the head, and kept: changing a comment's Status in its cell does not re-sort, so a row never moves under your pointer. Press the head again to sort with the new statuses.
What do Columns and density do?
Columns hides or shows Date, Replies and Status; the badge counts what is hidden, and the table keeps its width and every row's height. Comfortable rows are taller and Compact rows tighter, inside a scroll region of the same height, so the panel never grows or shrinks. Both choices are announced in the status line.
What stays local?
Ticks, statuses, sort, columns and density. Resolve selected sets the ticked rows to resolved in the page and says nothing was saved. To wire it up, send status changes from changeStatus and resolve, sort and page on the server for long lists, and store column and density choices per person.
Is it accessible?
It is a real table with a caption, column heads and a row head for each author. Every tick and Status select is named for its comment's author, the sortable heads are buttons, and the Columns popover is a labelled group of checkboxes. Results are read from one polite status line. The scroll region is reachable with Tab.