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.
catalog/contracts/table.ymlsource of truth · verbatim
$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity:name: Tabletag: wyrd-tablepackage: wyrd.component.tabletitle: Tablesummary: Read-only tabular data with a required caption and responsive horizontal overflow.relationships:related-to: - quality-parity-and-gatesclassification:category: data-displaycomposition: collectioninteractive: falsetarget-strategy:react: requiredflutter: requiredsurface:properties: - name: captiontype:kind: stringrequired: trueserializable: truesummary: Accessible table name and visible caption. - name: columnstype:kind: arrayitem:kind: stringrequired: trueserializable: truesummary: Ordered column labels. - name: rowstype:kind: arrayitem:kind: objectfields:cells:kind: arrayitem:kind: stringrequired: falsedefault: []serializable: truesummary: Ordered rows; missing cells render empty and extra cells are ignored.slots: []events: []states: - name: defaultsource: platformsummary: Table data is visible.parts: - name: rootsummary: Overflow container. - name: captionsummary: Visible table caption. - name: headersummary: Column header row. - name: rowsummary: Repeated data row. - name: cellsummary: Header or data cell.tokens:background: color.surfaceforeground: color.on-surfacemuted-foreground: color.on-surface-variantborder-color: color.outlineheader-background: color.surface-containerradius: rounded.mdcell-padding: spacing.smmessages: []obligations:accessibility:role: tablename: Caption property provides the table name.keyboard: []semantics: - 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.behavior:model: statelessinteractions: []hostEffects: []conditions: - rtl - density-compact - text-expansionsdui:status: serializableserializableProperties: - caption - columns - rowsserializableSlots: []eventBindings: []notes: Table serializes strings only; rich and interactive cells belong to later table capabilities.examples: - name: propsstate: defaultproperties:caption: Button propertiescolumns: - Prop - Type - Defaultrows: - cells: - variant - primary | secondary - primary - cells: - disabled - boolean - "false"slots: {} - name: emptystate: defaultproperties:caption: No resultscolumns: - Name - Statusrows: []slots: {}
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.
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.
Binding
Token
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
State
Source
Summary
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.