shadcn.io is not affiliated with official shadcn/ui
Segment Grid Integration Block for React
An 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.
Installation
Overview
An integration grid section for React with Base UI, written for Schemawick, a fictional tracking-plan checker, and its Segment connection. A compact header ("Which events go where") has the mark pair at its end. Under a band rule, a polite status line says what stays local beside a tally of routes. Below it, a real table runs rail to rail: six events from the plan (Product Viewed, Product Added, Cart Viewed, Checkout Started, Order Completed, Order Refunded) are the rows, each with its key property in code, and four destinations (Warehouse, Ads, Email, CRM) are the columns, each header counting how many events it receives. Every cell holds a checkbox named for its route, such as "Send Order Completed to Warehouse". The tally ("14 of 24 routes on") and the column counts are worked out from the ticks. On a phone the table scrolls sideways inside a focusable region and the event column stays in place. 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 and Checkbox, 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 routes are example data.
FAQ
How do I change the events and destinations?
Edit EVENTS and DESTINATIONS at the top of the file. Each event has an id, its name and the property that identifies it (key); each destination has an id and a name. START lists the routes that begin ticked as "event-id:destination-id" strings. The tally, the column counts and the status line are all worked out from the ticks, so nothing else needs editing.
Does ticking a cell change anything in Segment?
No. A tick changes this page's state only, and the status line under the header says so from the first paint and again after each change ("Order Completed to CRM is on in this demo. 15 of 24 routes on. Nothing was sent to Segment."). In a real product, wire toggle to your own routing rules or to Segment's destination filters. The event names here follow Segment's ecommerce spec.
How is the table named for keyboards and screen readers?
It is a real table with a caption, column headers and row headers, so a screen reader announces the event and the destination for every cell. Each checkbox also has its own name ("Send Order Completed to Warehouse"), which is what a keyboard user hears on Tab. The scroll region around the table is focusable with a visible ring, so it can be scrolled with the arrow keys on a phone.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
On a phone the table keeps a minimum width and scrolls sideways, while the first column sticks to the start edge with a hairline so you always know which event you are on. In a right-to-left layout the table, its sticky column and the hairlines flip; event keys stay in left-to-right code, and the counts keep their reading order. The header fades up once on load, which reduced motion turns off.
Related
- Pro
Segment List Integration
Synced tablesAn 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.
- 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 Grid Integration
Switch and tick gridsAn integration grid section for a cloud cost tool reading from AWS: eight service tiles you tick, and one stacked bar and coverage figure that follow every tick, counted from last month's typed spend.
- Pro
Sentry Grid Integration
Switch and tick gridsAn integration grid section for a release gate working with Sentry: six conditions that hold a deploy in a framed grid of shared hairlines, each a checkbox with number fields for its limits, and a sentence worked out from the ticks.