Dense Data Table
The compact variant fitting eight webhook rows where a standard table fits five.
The compact variant fitting eight webhook rows where a standard table fits five.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Dense Data Table is the compact variant: py-2 row padding instead of the default py-4, xs text throughout, and eight webhook delivery events (evt_9f4k2m through evt_9f4jp1) visible where a comfortable table would show five. Each row has a mono event id, the event type (invoice.paid, invoice.payment_failed, subscription.updated), the source (api, dashboard, cli, worker), a status dot with the label (Delivered in text-foreground, Pending in text-muted-foreground), and a right-aligned mono time. The footer names the tradeoff directly: use this variant when scanning matters more than reading.
Events are one array. The status dot pattern keeps the status column scannable without badge chrome that would widen rows.
Reach for this block in ops dashboards, webhook debuggers, log explorers, and any surface where an engineer needs to scan many rows quickly, wired to your events stream or log API. Switch to the comfortable table for settings pages and end-user billing history.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the webhook delivery log. Other dense tables:
Tip: dense is not a style preference; it is a context choice. Ops tools scan, settings pages read.