shadcn.io is not affiliated with official shadcn/ui
Session Analytics Table Block for Vue
A table of visitor sessions where each trail shows its first three pages and a plus button that opens a hover card with the whole trail, with a device glyph, time on site, a Converted only switch and a Pages head that sorts.
Installation
Overview
Show the path a visitor took without making the row tall, with this session table for Vue with Ark UI. A compact header names the table and holds a Switch, "Converted only", at its end. Inside a hairline frame with a plus mark on each corner, a native table lists eight Trailtally sessions with their start time, a trail, a device glyph and word, the time on site and whether the visitor converted. A trail shows its first three pages in order ("Home, Pricing, Signup") and, when there are more, a "+2" button that opens a Hover Card with the whole trail, numbered. The card follows hover, keyboard focus and touch, and the trail is also in the page as a list, so nothing sits only behind the card. The Pages head sorts by the length of the trail (first press the longest first, second the shortest, third the order they began), the switch takes out sessions that did not convert and the table keeps its height while it does. It is built from Hover Card, Switch, Badge and Guides. For analytics tools, session lists and any cell that holds a short path.
FAQ
How do I use my own sessions?
Edit SESSIONS: each has an id, a start time, a device, the seconds on site, whether it converted and its trail, the pages in order. Change SHOWN to show more or fewer steps before the plus button. Page names can repeat; each step gets its own key.
How does the full trail open?
By hover, by keyboard focus and by touch. The "+2" is a real button named with the session ("Show all 5 pages of session s-4821"), so Tab reaches it, the card opens on focus and closes on blur or Escape, and a tap opens it on a touch screen. The card is extra: the visible steps are a list in the page.
What does Converted only do to the table?
It takes out sessions that did not convert. The table is held to the height of the full list, so the page doesn't jump, and the status line says how many of the eight are showing. Turn it off and the sessions return in the order you had sorted them.
Does it work right to left?
Yes. The separators between pages mirror, page names and counts sit in isolated runs, session ids and times stay left to right, and the sort arrows keep their meaning.
What stays local, and how do I wire real sessions?
The sessions are constants; the switch and the sort are two useState calls. To use real data, load sessions with their ordered page paths from your analytics store; if trails can be long, send only the first few and fetch the full path when the card opens.