shadcn.io is not affiliated with official shadcn/ui
Selectable Timeline Block for Solid
Ten events of an insurance claim on a rail of checkboxes: Shift-click picks a range, and a sticky foot counts the selection and saves the picked rows as a real CSV file.
Installation
Overview
Pick a stretch of a record and take it with you with this selectable timeline for Solid with Ark UI. It is written for Casepack, a fictional case-file tool. A hairline frame with a plus mark on each corner holds one vertical rail of ten events from "Claim filed" to "Payment sent". Every event is one row and one checkbox: click it or press Space to pick it, and Shift-click to pick everything between this event and the last one you picked. A picked row is tinted and its box is filled. A foot that sticks to the bottom of the screen on a phone says how many are selected, clears them with a ghost Button, and holds the one primary, a Shine Button that reads "Export 4 events". Pressing it saves a CSV of the picked rows (date, time, type, by, title, note), made in the browser, and the status line says the file was saved. The button is unavailable until something is picked. It is built from Badge, Button, Shine Button and Guides. For case files, audit records and any history where someone needs an excerpt. The claim is example data.
FAQ
How do I change the events?
Edit EVENTS at the top of the file. Each event has an id, a local date and time at, a by, a kind (an icon and a word), a title and a note. The rail, the counts and the CSV columns are derived from them. To change the columns, edit csvOf(), which quotes every cell and uses CRLF line ends.
How does Shift-click work?
The page remembers the last event you picked. A Shift-click adds every event between that one and the one you pressed, in rail order, to the selection; it never removes any. Without Shift, a click flips only that event. Space on a focused checkbox works the same way as a click, so a keyboard user can pick events one by one.
What does Export do, and what stays in the page?
It builds the CSV in memory, saves it through a temporary link and says so in the status line. Nothing is uploaded. The selection is local state. To make it real, send the picked ids to your server in exportRows() and return a signed download link, or keep the file made here.
Is it accessible?
Each row is a real checkbox inside a label, so it is named by its title and read with its kind, date and note. Focus shows as a ring on the drawn box, and the status line is a polite live region present from load. The Export button is unavailable with aria-disabled rather than disabled, so it stays reachable and explains itself in the status line.
Why does the foot stick?
On a phone the list is longer than the screen, so the count and the Export button would scroll out of reach. The foot sticks to the bottom edge of the frame while any part of the rail is in view, and sits in the normal flow from the medium breakpoint up. Change that with the sticky bottom-0 md:relative classes.