Data Table

The visible companion to the charts — a native, accessible <table> with numeric alignment, zebra rows, a totals footer, and trend cells. No JavaScript. Interactivity comes from composing with the filter primitive (below); sort and pagination are server-driven.

Basic + totals + trend

Revenue by product line (FY25)
Product	Revenue	Units	YoY
Atlas Pro	$1,240,000	3,100	+8.2%
Beacon	$980,500	5,420	-3.1%
Cirrus	$2,015,750	1,870	+14.6%
Delta Lite	$455,000	9,030	0.0%
Total	$4,691,250	19,420

Sticky header (scroll the box)

Month	Visitors	Signups
January	42,310	1,204
February	39,880	1,150
March	51,420	1,690
April	48,900	1,512
May	55,030	1,820
June	60,110	2,005
July	58,640	1,944

Sortable column (server-driven)

City	Population
Tokyo	37,400,000
Delhi	32,900,000
Shanghai	29,200,000

The column with aria-sort="descending" shows a ↓ glyph; its link points at the server's sort URL. CSS never reorders rows (no JS) — the server renders them in order.

Filterable rows (composed with `.casca-filter`)

Hardware Software Services

Item	Category	MRR
Edge Node	Hardware	$12,400
Dashboard Pro	Software	$38,900
Onboarding	Services	$9,150
API Tier	Software	$21,300
Sensor Kit	Hardware	$6,720

Uncheck a category to hide its rows (the table reflows). Pure CSS via :has(); the rows carry data-filter.

Selectable rows (no-JS, submits with the form)

Select	Item	MRR
	Atlas Pro	$1,240
	Beacon	$980
	Cirrus	$2,016
	Delta Lite	$455

Checked rows highlight (brand tint, distinct from hover) and submit as rows=<value>. Select-all and a live count need JS or a server round-trip — out of scope for the CSS primitive.

Markup

<table class="casca-table">
  <thead>
    <tr><th scope="col">Product</th><th scope="col" class="casca-table-num">YoY</th></tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Atlas</th>
      <td class="casca-table-num" data-trend="up">+8.2%</td>
    </tr>
    <!-- data-trend = up | down | flat; .casca-table-num right-aligns -->
  </tbody>
</table>