shadcn.io is not affiliated with official shadcn/ui
Segment List Integration Block for React
An integration list section for a tracking-plan checker working with Segment: seven held events as table rows with checkboxes, a select-all with a mixed state, working Replay and Discard that take the ticked rows off the list, and an empty state that brings the sample back.
Installation
Overview
An integration list section for React with Base UI, written for Schemawick, a fictional tracking-plan checker, and its Segment connection. A compact header ("Events held back, ready to decide") has the mark pair at its end. Under a band rule, a polite status line says what stays local beside "3 of 7 selected" and two actions, Replay and Discard. Below it, a table runs rail to rail with seven kinds of event held back for breaking the plan: a checkbox, the event, what is wrong with it (not in the plan, wrong type or a missing property, with the property in code), how many events arrived and the day it was first seen. The checkbox in the header selects every row and shows a mixed state when only some are ticked. Replay and Discard take the ticked rows off the list and say how many kinds of event and how many events changed; when nothing is left, a short message offers the sample events back. The list keeps its height as rows leave, so nothing below it moves. On a phone the problem, the count and the day fold into the event's cell. The block ends on its last row, so no rule closes it. The page's rails and top rule come from the Guides spine. It's built from Guides, Checkbox, Button and Empty, with your theme's tokens for every colour. Segment is named in text only: no Segment logo, colour or wordmark ships with the block. Nothing is sent to Segment, and the events and counts are example data.
FAQ
How do I change the held events?
Edit START at the top of the file. Each entry has an id, the event name, what is wrong (problem, one of three words), the property in code and a note that completes the sentence, how many arrived (count) and the weekday it was first seen. The header counts, the totals in the status line and the "3 of 7 selected" figure are all worked out from the rows that remain.
Do Replay and Discard send or delete anything in Segment?
No. They take the ticked rows off this page's list and the status line says so ("Replayed 2 kinds of event, 360 events, in this demo. Nothing was sent to Segment."). The line is on the page from the first paint. In a real product, wire replay and discard to your own queue. Replay and Discard are Schemawick's actions in this story, not features of Segment itself.
How does the select-all checkbox work?
It ticks every row, clears them all, or, when only some rows are ticked, shows a mixed state (a dash). Pressing it from the mixed state ticks every row. Pressing Replay or Discard with nothing ticked doesn't do anything but ask you to tick an event first; the buttons stay focusable so a keyboard user hears why.
How is it named for keyboards and screen readers?
It is a real table with a caption, column headers and row headers. Every checkbox is named for its row ("Select Order Completed") and the header one is "Select all held events". Replay and Discard sit in a labelled toolbar, and the result of each action is read out through a polite status region that exists from load. The unseen copy of the full list that keeps the height is hidden from assistive technology and can't be focused.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
On a phone the extra columns fold into the event's cell as two short lines, so the table never scrolls sideways, and the two actions wrap under the status. In a right-to-left layout the table flips; property names keep their left-to-right reading order and the counts stay together. The header fades up once on load, which reduced motion turns off.
Related
- Pro
Segment Grid Integration
Switch and tick gridsAn integration grid section for a tracking-plan checker working with Segment: a table of six tracked events by four destinations with a named checkbox in every cell, a count in each column header and a derived tally of routes.
- Pro
Segment Stats Integration
Lines and dotsAn integration stats section for a tracking-plan checker working with Segment: four destinations as rows with a hand-drawn line of events delivered per day, one slider that moves a marker across all four, a readout for the chosen day and totals worked out from typed counts.
- Pro
Source Fan-Out Detail Integration
With a product drawingAn integration detail section for a tracking-plan checker connecting to Segment: what it can read and write as an accordion of three groups, and a framed figure of one source fanning out to four destinations, one of them barred.
- Pro
Write Key Log Setup Integration
Keys and codeAn integration setup section for a tracking-plan checker connecting to Segment: a source type combobox, the write key with a Copy button, and a check that prints four example calls into a dark log window and ends on a result that says it ran in this demo.
- Pro
AWS List Integration
Synced tablesAn integration list section for a cloud cost tool reading from AWS: six cost-allocation tags as rows with a coverage bar, a state word and an Activate switch, a segmented filter with counts, and a working Retry on the one row that timed out.
- Pro
Sentry List Integration
Grouped and triagedAn integration list section for a release gate working with Sentry: a summary of a release's issues beside a ranked list that re-sorts by newest, most events or most users, with each issue's level, title, events, users and a hand-drawn line.