Grouped Columns Table
An endpoint latency table with a two tier header spanning grouped metric columns for production and staging, split by vertical rules down the body.
An endpoint latency table with a two tier header spanning grouped metric columns for production and staging, split by vertical rules down the body.
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
Grouped Columns Table is the endpoint latency view for six API routes, from /v1/charges to /v1/reports. A two tier header sits on top: the upper row groups the metric columns under Production and Staging via colSpan, and the lower row labels the three metrics in each group, p50, p99, and Errors. Vertical rules run from each group boundary down through the body so the two environments read as distinct blocks.
Endpoints are one typed array, each holding a production and a staging metric set. Error rates above one percent render in the destructive color, so the single staging spike on /v1/subscriptions stands out. The footnote explains that staging runs on smaller instances, so a slightly higher p99 there is expected.
Reach for this block whenever a table compares the same set of metrics across two or more contexts side by side: environments, time periods, regions, or plan tiers. The grouped header keeps each context's columns visually bundled instead of blurring into one flat row.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the environment latency comparison. Other grouped column tables:
Tip: run a vertical rule down each group boundary; without it a two tier header collapses back into one wide row and the grouping is lost.