Dowe

DISPLAY

Table

Tables turn a Signal array into an accessible, portable data grid with explicit columns.

DATA AND COLUMNS

One Signal, explicit fields

data names the row Signal. Each column reads one quoted relative field path from every item, so the compiler can validate the row shape before generating a target.

Name
Role
Location
Status

No data

There are no records to display

dowe
type TeamMember
  name:string
  role:string
  location:string
  status:string

signal teamMembers type:TeamMember[] value:[{ name:"Avery Morgan" role:"Product designer" location:"Bogota" status:"Active" }]

Table data:teamMembers variant:"soft" scheme:"surface" striped:true dividers:true
  column field:"name" label:"Name"
  column field:"role" label:"Role"
  column field:"location" label:"Location"
  column field:"status" label:"Status" align:"end"

COLUMN LAYOUT

Width and alignment stay intentional

Use width only when a column needs a stable proportion or minimum. Column padding is included in that width on every target, and narrow viewports scroll horizontally instead of clipping rows.

Member
Discipline
Location
Status

No data

There are no records to display

dowe
Table data:teamMembers variant:"outlined" scheme:"primary" bordered:true
  column field:"name" label:"Member" width:"12rem"
  column field:"role" label:"Discipline" width:"2fr"
  column field:"location" label:"Location" align:"center" width:"10rem"
  column field:"status" label:"Status" align:"end" width:"8rem"

PRESENTATION

Choose density and emphasis

variant and scheme style the table surface, header, borders, stripes, and empty state. size adjusts header and cell typography together.

Compact
Status

No data

There are no records to display

Comfortable
Status

No data

There are no records to display

Spacious
Status

No data

There are no records to display

dowe
Table data:teamMembers variant:"soft" scheme:"info" size:"md" striped:true dividers:true
  column field:"name" label:"Member"
  column field:"status" label:"Status" align:"end"

EMPTY STATE

Keep the next step visible

An empty array is still a valid table. Define direct, static copy so the same accessible state appears on web, desktop, Android, and iOS.

Name
Role
Status

No team members yet

Invite collaborators to populate this workspace table.

dowe
signal emptyMembers type:TeamMember[] value:[]

Table data:emptyMembers variant:"soft" scheme:"warning" bordered:true emptyTitle:"No team members yet" emptyDescription:"Invite collaborators to populate this workspace table."
  column field:"name" label:"Name"
  column field:"role" label:"Role"
  column field:"status" label:"Status" align:"end"

PORTABLE CONTRACT

Semantic rows, native output

WEB AND DESKTOP

A real table

Dowe emits semantic table markup inside a horizontal overflow container.

NATIVE

Readable rows

SwiftUI and Compose render native headers, cells, and the same empty-state copy.

CURRENT SCOPE

Data display only

Sorting, pagination, selection, search, and custom cells are not part of the current Table contract.

API

Table props

Table also accepts applicable common id, visibility, spacing, sizing, rounded, border, and font props. It requires one or more direct column entries.

Prop
Type
Default

No data

There are no records to display

Column entry props

column is structural: it is valid only inside Table, has no children, and requires both field and label.

Prop
Type
Default

No data

There are no records to display