shadcn.io is not affiliated with official shadcn/ui
Row Comments Table Block for Vue
A contract review table where each clause has a comment count button that opens its thread in a pane beside the table, with a composer that posts to the thread.
Installation
Overview
Discuss a record without leaving the table, with this row comments table for Vue with Ark UI. Eight clauses of a services agreement sit in a native table with an owner, a status and a comment count on each. The count is a toggle button named like "3 comments on Clause 4", and pressing it opens that clause's thread in a pane at the end of the panel: each comment has its author's initials, a fixed time and its text, and under the thread is a Textarea and the one Shine Button, Post comment. A posted comment joins the thread, the count in the table follows, focus lands on the new comment and the thread scrolls to it; an empty comment is refused in words. Escape closes the thread and puts focus back on the count that opened it. On a phone the thread replaces the table, with a Back to the list button. It's built from Textarea, Shine Button, Avatar, Badge and Guides. For reviews, approvals, task discussions and feedback.
FAQ
How do the thread and the counts stay in step?
All comments live in one list in state, each with the clause it belongs to. The thread is that list filtered by the open clause and every count in the table is the length of the same filter, so posting a comment updates the count, the heading of the pane and the totals above the table together.
What happens when I post?
The text is trimmed and added to the end of the open clause's thread, signed with "You" and dated with a fixed time, the box is cleared, the thread scrolls to the new comment and focus lands on it. Posting nothing does not add anything: the status line says what is missing and focus goes back to the box.
What does the keyboard do?
Tab reaches each count, which is a toggle button, and Enter or Space opens its thread. While focus is anywhere in the block, Escape closes the thread and returns focus to the count that opened it. On a phone Back does the same, so the table and the buttons are always where you left them.
How does it look on a phone?
Below the large breakpoint the table and the thread are one pane at a time. Pressing a count shows the thread with focus on its heading, and Back to the list brings the table back with focus on the count. The owner and status fold under the clause's title, and both views keep the same height.
Is it accessible?
The count buttons say what they do ("3 comments on Clause 4") and report aria-pressed. The thread is a named, scrollable region, the composer's box is labelled with the clause it posts to, and results are read out through one polite status line. Status is a word beside a dot, never colour alone.
What stays local, and how do I wire it for real?
Comments are typed in the file and a new one exists only in this page, signed "You", so nothing is sent and reloading clears it. To use real threads, load your comments into COMMENTS, send the text in post to your server, and add the saved comment to the list from the response.