shadcn.io is not affiliated with official shadcn/ui
Activity Log Table Block for Solid
A workspace activity table that folds bursts: consecutive edits by one person within 15 minutes become one row with a count and a disclosure, and a switch shows every entry on its own row.
Installation
Overview
Keep a busy activity feed readable, with this activity log table for Solid with Ark UI. A compact header names the log and holds a Switch labelled "Group repeated actions". Inside a hairline frame with a plus mark on each corner, a band counts the events and the rows they take ("18 events folded into 9 rows"), over a native table of when, who, what and where in a fixed-height region with a sticky head and a heading for each day. While the switch is on, consecutive entries by the same person doing the same thing, each within 15 minutes of the one before, become one row: "Isaura Brandvold edited 6 pages", with the span of times, a count in a Badge and a disclosure that opens the six entries in a row of their own beneath. Switched off, every entry is its own row. Times are typed values, so nothing reads a clock, and the region keeps its height whichever way the rows are grouped. On a phone the Where column moves under the name. It's built from Switch, Badge, Avatar and Guides, with a CSS entrance only. For audit-light feeds, document history and admin consoles.
FAQ
How does it decide which entries form a burst?
rowsOf walks the entries newest first and appends an entry to the row before it when the person and the action are the same and the two are no more than WINDOW_MINUTES (15) apart. The gap is measured from the entry just before, not from the first one, so a steady run of edits stays one burst however long it goes, and a pause longer than 15 minutes starts a new row. Entries on a different day are never joined, because the day heading splits them.
How do I see what is inside a burst?
The summary row holds a button named for what it opens ("Show the 6 entries: Isaura Brandvold edited 6 pages"), with aria-expanded and aria-controls pointing at the detail row. It opens one row that spans the table, with each entry's time, page and folder in a list. Turning the switch off or on closes every burst, so the table is never half-open after a regroup.
What stays local, and how do I wire real events?
The eighteen entries are typed in ENTRIES and the grouping happens in the page. For real data, load the events from your API newest first in the same shape, keep rowsOf as it is and let the server page the list; folding on the client over one page is usually enough, and folding on the server needs the same 15-minute rule applied to the query. The times are ISO minutes in UTC and formatted with a fixed time zone, so they read the same on the server and in every browser.
Is a grouped table accessible?
Yes. It's a native table with a caption, th scope="col" heads, a row header for each person and a colgroup heading for each day. The disclosure is a real button with aria-expanded, the switch has its own name, and a polite status line, present from the start, says what changed after each press. The scrolling region is focusable so a keyboard can scroll it, and the dots and counts carry text, so nothing depends on colour.
Does the table change height when I regroup it?
No. The rows live in a region of fixed height with a sticky head, so grouping, ungrouping and opening a burst only change what scrolls inside it. The panel around it keeps its size, and the status line reserves two lines on a phone for the longer messages.