data-display — wyrd.component.table

Table

Read-only tabular data with a required caption and responsive horizontal overflow.

Install @wyrd-company/react or the Flutter package and use it directly — your DESIGN.md does the styling.

01

Examples

Generated from the contract's examples block. Previews are the published @wyrd-company/react component, themed by the brand's role tokens — flip the site's light/dark toggle and they follow.

Code target Applies to every example on component pages.
props state: default
Button properties
PropTypeDefault
variantprimary | secondaryprimary
disabledbooleanfalse
Usage
import { WyrdTable } from "@wyrd-company/react";

<WyrdTable caption="Button properties" columns={["Prop","Type","Default"]} rows={[{"cells":["variant","primary | secondary","primary"]},{"cells":["disabled","boolean","false"]}]} />
empty state: default
No results
NameStatus
Usage
import { WyrdTable } from "@wyrd-company/react";

<WyrdTable caption="No results" columns={["Name","Status"]} rows={[]} />
02

Properties

NameTypeDefaultSummary
caption string undefined Accessible table name and visible caption.
columns array undefined Ordered column labels.
rows array Ordered rows; missing cells render empty and extra cells are ignored.
03

Tokens

The contract's token bindings. Open the shared contextual sidebar from any example; primary swatches reflect the color you pick there. Error swatches show the active preset's values; editing any knob switches to custom and resets error to TWW · Ink.

BindingToken
background color.surface
foreground color.on-surface
muted-foreground color.on-surface-variant
border-color color.outline
header-background color.surface-container
radius rounded.md
cell-padding spacing.sm
04

States

StateSourceSummary
default platform Table data is visible.
05

Accessibility

From the contract's accessibility obligations. Role table; Caption property provides the table name.

  • Web projections use native table, caption, thead, tbody, th, and td elements.
  • Flutter exposes one semantic row per visual row and marks column labels as headers.
  • Horizontal overflow does not collapse columns or replace table semantics.
  • Verified under: rtl, density-compact, text-expansion.
06

SDUI

Status: serializable. Table serializes strings only; rich and interactive cells belong to later table capabilities.

SerializableMembers
Propertiescaption, columns, rows
Slots
Events
The Wyrding Way — a contract-first design system. © Wyrd Company