Table 表格

响应式表格。列宽可以固定或按权重分配；当表格窄于各列最小宽度之和时，每一行变成由“表头: 值”组成的卡片（adaptive: 'auto'）。

基础用法

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' })
    }
  }
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

数据形式

用 rows: string[][]（以及 footer）代替插槽。adaptive: 'table' 会保持表格形态，放不下时横向滚动。

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']
})

网页近似预览，真机效果以 HarmonyOS 渲染为准。

大数据量

数据形式是虚拟化的（List + Repeat.virtualScroll()）：只存在可见的行，滚出视野的行会被复用，因此 10 000 行的打开与滚动速度与 10 行相当。收窄框架即可看到虚拟化的卡片布局。

// 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', '', '', '']
})

网页近似预览，真机效果以 HarmonyOS 渲染为准。

BIG_ROWS.length 行 · frame = full

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

STable

shadcn-vue 的 Table（w-full caption-bottom text-sm），带列宽设置以及响应式的卡片布局。

插槽形式：

数据形式（无插槽）：STable({ columns: this.cols, rows: [['INV001', '$250.00'], ...], footer: [...] })。数据形式是虚拟化的（List + Repeat.virtualScroll()，ADR D14）：10 000 行的渲染速度与 10 行相当。当表体高于 bodyHeight（默认为超过 50 行时 480vp）时，表体会在表格内滚动，表头保持可见。长表格请使用数据形式；插槽形式会构建每一行。

列（STableColumn）：ArkUI 无法为任意子组件设置尺寸，因此由表格负责宽度——固定 vp，或剩余宽度的权重（带最小宽度）；每个单元格读取其索引对应的宽度（即其在行中的位置；可传入 column 覆盖）。列放不下时，表格会横向滚动（adaptive: 'table'），或者——使用 adaptive: 'auto'（默认）时——把每一行变成「表头：值」形式的卡片。'cards' 则始终显示为卡片。

属性	类型	默认值	说明
columns	STableColumn[]	[]
adaptive	TableAdaptive TableAdaptive = 'auto' | 'table' | 'cards'	'auto'
rows	string[][] | undefined	undefined	数据形式：每行每列一个字符串。留空则使用插槽。
footer	string[] | undefined	undefined	数据形式：可选的页脚单元格。
bodyHeight	number | undefined	undefined	数据形式：表体的视口高度，单位 vp。超出部分会在表格内滚动，并按需构建。未设置时，表体随行数变化，最多 50 行；超过 50 行时使用 480vp 的视口（ADR D14）。
rowKey	((row: string[], index: number) => string) | undefined	undefined	数据形式：稳定的行 key（默认为行索引）。插入 / 重新排序行时请提供该值。
caption	ResourceStr | undefined	undefined	表格下方的标题（text-muted-foreground mt-4 text-sm）。

插槽: 子组件（尾随闭包）

STableCaption

表格标题（text-muted-foreground mt-4 text-sm，居中）。请放在表体之后编写。

属性	类型	默认值	说明
text	ResourceStr	''

STableHeader

<thead>：其中的行始终绘制底部边框。卡片布局中隐藏。

插槽: 子组件（尾随闭包）

STableBody

<tbody>：最后一行没有底部边框。

插槽: 子组件（尾随闭包）

STableFooter

<tfoot>：bg-muted/50 border-t font-medium。

插槽: 子组件（尾随闭包）

STableRow

<tr>：border-b transition-colors hover:bg-muted/50；selected 时为 bg-muted。卡片布局中，它是一张带边框的卡片，列出「表头：值」形式的行。

属性	类型	默认值	说明
selected	boolean	false

插槽: 子组件（尾随闭包）

STableHead

<th>：h-10 px-2 text-left font-medium text-muted-foreground whitespace-nowrap。宽度 / 对齐方式由其所在的列决定（即其在行中的位置，或 column）。

属性	类型	默认值	说明
text	ResourceStr | undefined	undefined
column	number | undefined	undefined	列索引；默认为其在行中的位置。

插槽: 子组件（尾随闭包）

STableCell

<td>：p-2 align-middle whitespace-nowrap。传入 text 或插槽内容（徽标、按钮等）。宽度 / 对齐方式由其所在的列决定（即其在行中的位置，或 column）。

属性	类型	默认值	说明
text	ResourceStr | undefined	undefined
column	number | undefined	undefined	列索引；默认为其在行中的位置。

插槽: 子组件（尾随闭包）