Table

A responsive table. Columns are fixed or weighted; when the table is narrower than its columns' minimum widths, every row becomes a card of "Head: value" lines (adaptive: 'auto').

Usage

const columns: STableColumn[] = [
  new STableColumn('invoice', 'Invoice', { fixedWidth: 100 }),
  new STableColumn('status', 'Status'),
  new STableColumn('method', 'Method', { weight: 1.5, minWidth: 120 }),
  new STableColumn('amount', 'Amount', { alignment: 'end', minWidth: 90 })
];

STable({ columns: columns, caption: 'A list of your recent invoices.' }) {
  STableHeader() {
    STableRow() {
      STableHead({ text: 'Invoice' })
      STableHead({ text: 'Status' })
      STableHead({ text: 'Method' })
      STableHead({ text: 'Amount' })
    }
  }
  STableBody() {
    ForEach(INVOICES, (r: Invoice) => {
      STableRow() {
        STableCell({ text: r.invoice })
        STableCell() { SBadge({ text: r.status, variant: 'outline' }) }
        STableCell({ text: r.method })
        STableCell({ text: r.amount })
      }
    }, (r: Invoice) => r.invoice)
  }
  STableFooter() {
    STableRow() {
      STableCell({ text: 'Total' })
      STableCell()
      STableCell()
      STableCell({ text: '$2,500.00' })
    }
  }
}

Approximate web preview — the HarmonyOS rendering is the reference.

Data form

Pass rows: string[][] (and footer) instead of slots. adaptive: 'table' keeps the table and scrolls horizontally when it does not fit.

STable({
  columns: columns,
  adaptive: 'table',   // never cards: scrolls horizontally when too narrow
  rows: [
    ['INV001', 'Paid', 'Credit Card', '$250.00'],
    ['INV002', 'Pending', 'PayPal', '$150.00'],
    ['INV003', 'Unpaid', 'Bank Transfer', '$350.00']
  ],
  footer: ['Total', '', '', '$750.00']
})

Approximate web preview — the HarmonyOS rendering is the reference.

Large data

The data form is virtualized (List + Repeat.virtualScroll()): only the rows in view exist and scrolled-out rows are reused, so 10 000 rows open and scroll like 10. Narrow the frame to see the virtualized card layout.

// 10 000 rows: the body is a List + Repeat.virtualScroll(), so only the rows in view
// are built; it scrolls inside a 400vp viewport under a fixed header.
STable({
  columns: columns,
  rows: BIG_ROWS,                 // string[][] with 10 000 entries
  bodyHeight: 400,
  rowKey: (r: string[]) => r[0],  // invoice number: stable across inserts / sorting
  footer: ['10 000 invoices', '', '', '']
})

Approximate web preview — the HarmonyOS rendering is the reference.

BIG_ROWS.length rows · frame = full

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

STable

shadcn-vue Table (w-full caption-bottom text-sm), with column sizing and a responsive card layout.

Slot form:

Data form (no slots): STable({ columns: this.cols, rows: [['INV001', '$250.00'], ...], footer: [...] }). The data form is virtualized (List + Repeat.virtualScroll(), ADR D14): 10 000 rows render as fast as 10. Its body scrolls inside the table once it is taller than bodyHeight (default 480vp above 50 rows), with the header kept in view. Use the data form for long tables; the slot form builds every row.

Columns (STableColumn): ArkUI cannot size arbitrary children, so the table owns the widths — fixed vp or a weight of the remaining width with a min width — and each cell reads the width of its index (its position in the row; pass column to override). When the columns do not fit, the table scrolls horizontally (adaptive: 'table') or — with adaptive: 'auto' (default) — turns every row into a card of "Head: value" lines. 'cards' always shows cards.

Prop	Type	Default	Description
columns	STableColumn[]	[]
adaptive	TableAdaptive TableAdaptive = 'auto' | 'table' | 'cards'	'auto'
rows	string[][] | undefined	undefined	Data form: one string per column for each row. Leave undefined to use the slot.
footer	string[] | undefined	undefined	Data form: optional footer cells.
bodyHeight	number | undefined	undefined	Data form: body viewport height (vp). Rows beyond it scroll inside the table and are built lazily. Unset: the body follows its rows up to 50 rows, above that it gets a 480vp viewport (ADR D14).
rowKey	((row: string[], index: number) => string) | undefined	undefined	Data form: stable row key (default: the row index). Give one when rows are inserted / reordered.
caption	ResourceStr | undefined	undefined	Caption below the table (text-muted-foreground mt-4 text-sm).

Slots: children (trailing closure)

STableCaption

Table caption (text-muted-foreground mt-4 text-sm, centred). Write it after the body.

Prop	Type	Default	Description
text	ResourceStr	''

STableHeader

<thead>: its rows always draw a bottom border. Hidden in the card layout.

Slots: children (trailing closure)

STableBody

<tbody>: the last row has no bottom border.

Slots: children (trailing closure)

STableFooter

<tfoot>: bg-muted/50 border-t font-medium.

Slots: children (trailing closure)

STableRow

<tr>: border-b transition-colors hover:bg-muted/50, bg-muted when selected. In the card layout it is a bordered card listing "Head: value" lines.

Prop	Type	Default	Description
selected	boolean	false

Slots: children (trailing closure)

STableHead

<th>: h-10 px-2 text-left font-medium text-muted-foreground whitespace-nowrap. Width / alignment come from its column (its position in the row, or column).

Prop	Type	Default	Description
text	ResourceStr | undefined	undefined
column	number | undefined	undefined	Column index; defaults to the position in the row.

Slots: children (trailing closure)

STableCell

<td>: p-2 align-middle whitespace-nowrap. Pass text or slot content (badges, buttons …). Width / alignment come from its column (its position in the row, or column).

Prop	Type	Default	Description
text	ResourceStr | undefined	undefined
column	number | undefined	undefined	Column index; defaults to the position in the row.

Slots: children (trailing closure)