1 viewer
Back to Components
Component · Data

Table

Tabular data display with optional sorting, paging, and detail rows.

Category
Data
Slots
12
States
3
Writer
Shared
cre8.primitive.table

Preview

Live renderShared SSR + WASM writers
Peer Connections
Peer IDTransportLatencyStatus
c8-node-alphaWebSocket / Wire14msSynced
c8-node-bravoWebRTC P2P42msActive
c8-node-charlieHTTP/288msIdle
3 rows
<Table
  columns={[
    { key: "peer_id", label: "Peer ID", sortable: true },
    { key: "transport", label: "Transport" },
    { key: "latency", label: "Latency", sortable: true },
    { key: "status", label: "Status" }
  ]}
  rows={[
    {
      latency: "14ms",
      peer_id: "c8-node-alpha",
      status: "Synced",
      transport: "WebSocket / Wire"
    },
    { latency: "42ms", peer_id: "c8-node-bravo", status: "Active", transport: "WebRTC P2P" },
    { latency: "88ms", peer_id: "c8-node-charlie", status: "Idle", transport: "HTTP/2" }
  ]}
  title="Peer Connections"
/>

Anatomy

The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.

SlotDOM class
root.primitive-table
title.primitive-table__title
empty.primitive-table__empty
scroll.primitive-table__scroll
grid.primitive-table__grid
head.primitive-table__head
body.primitive-table__body
row.primitive-table__row
cell.primitive-table__cell
heading.primitive-table__heading
pagination.primitive-table__pagination
count.primitive-table__count
12 rows
State attribute
data-render-modefrom the renderMode prop
Hydration markers
data-cre8-table

States and platforms

The states the contract publishes, the platforms it declares, and the style recipes that dress it.

States
sortedexpandedempty
Platforms
webnativeruntime-node
Recipes
unstyledruntime-console

Renderers

Shared writer
Table renders through the one writer the server and the WASM DOM share, so both emit the same markup.

Every tag in the example above renders through a shared writer.

Declared adapters. A status is the manifest's declaration, not a measured parity result.

TargetRendererStatus
webreactexperimental
runtime-nodeview-nodeready
ssrhtml-dataready
terminalterminal-tableplanned
nativenative-adapterexperimental
5 rows

Accessibility

Keeps native table semantics while allowing title-less labelling and runtime inspection metadata on both the section shell and the table element.

  • Sortable headers expose button semantics and sort direction.
  • Expanded details remain reachable from the row interaction.
  • Title-less tables use aria-label or aria-labelledby so the semantic table still has a stable accessible name.