shadcn.io is not affiliated with official shadcn/ui
Segment Grid Integration Block for Ark UI
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 Ark 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.