表格与 DataTable

Table 为普通表格提供样式（斑马纹、悬停、边框、紧凑、彩色表格）。DataTable 是完整组件：排序、搜索、分页、选择、响应式列、行内编辑和服务端模式——所有文本均已翻译。

普通表格

普通表格

Vue

<ThlTable striped hover>
  <thead><tr><th>#</th><th>Name</th><th>Role</th><th>Office</th></tr></thead>
  <tbody><tr v-for="e in rows" :key="e.id"><td>{{ e.id }}</td><td>{{ e.name }}</td><td>{{ e.role }}</td><td>{{ e.office }}</td></tr></tbody>
</ThlTable>

React

<SimpleTable striped hover>
  <thead>…</thead><tbody>…</tbody>
</SimpleTable>

Angular

<table thlTable striped hover>
  <thead>…</thead><tbody>…</tbody>
</table>

DataTable

DataTable

Vue

<div><p v-if="selected.length">Selected: {{ selected.map((r) => r.name).join(', ') }}</p>
<ThlDataTable :data="employees" :columns="columns" row-key="id" selectable striped :page-size="5" @selection-change="(r) => (selected = r)">
  <template #cell-name="{ row }"><div class="thl-flex" style="flex-wrap:nowrap"><ThlAvatar :src="row.avatar" size="xs" />{{ row.name }}</div></template>
  <template #cell-joined="{ row }">{{ d(row.joined) }}</template>
  <template #cell-salary="{ row }">{{ n(row.salary, { style: 'currency', currency: 'USD' }) }}</template>
</ThlDataTable></div>

React

<DataTable data={employees} rowKey="id" selectable striped pageSize={5} onSelectionChange={setSelected}
  columns={[
    { key: 'name', title: t('pages.contact.name'), sortable: true,
      render: (e) => <><Avatar src={e.avatar} size="xs" />{e.name}</> },
    { key: 'office', title: 'Office', sortable: true, hideBelow: 1024 },
    { key: 'salary', title: 'Salary', sortable: true, align: 'right',
      render: (e) => t.n(e.salary, { style: 'currency', currency: 'USD' }) },
  ]} />

Angular

<thl-data-table [data]="employees" [columns]="columns" rowKey="id" selectable [striped]="true" [pageSize]="5"
                (selectionChange)="selected.set($event)">
  <ng-template thlCell="name" let-row><thl-avatar [src]="row.avatar" size="xs" />{{ row.name }}</ng-template>
  <ng-template thlCell="salary" let-row>{{ i18n.n(row.salary, { style: 'currency', currency: 'USD' }) }}</ng-template>
</thl-data-table>

列

字段	类型	说明
key	string	字段名（也是单元格插槽名 cell-{key} / thlCell="{key}"）
title	string / node	表头
value	(row) => unknown	用于排序/搜索的取值函数（默认为 row[key]）
sortable	boolean	点击表头按 升序 → 降序 → 无 排序
compare	(a, b) => number	自定义排序
searchable	boolean	是否参与全局搜索（默认 true）
align	'left' | 'center' | 'right'
width	string | number
hideBelow	number (px)	响应式隐藏列
editable	boolean	行内编辑 → cell-edit 事件
render	仅 React	单元格渲染函数

服务端模式

设置 manual 和 total，然后在 query-change（{ page, pageSize, sort, search }）时加载数据：

<ThlDataTable manual :total="total" :data="rows" :columns="cols" :loading="loading" @query-change="load" />

API

Table

<ThlTable> · import { ThlTable } from '@thl-ui/vue'

Prop	类型	默认值
striped	boolean	—
hover	boolean	—
bordered	any	—
compact	boolean	—
color	string	—
full	string	—

插槽: default

DataTable

<ThlDataTable> · import { ThlDataTable } from '@thl-ui/vue'

Prop	类型	默认值
data*	array	—
columns*	array	—
rowKey	any	—
pageSize	number	—
paginate	boolean	true
searchable	boolean	true
selectable	boolean	—
striped	boolean	—
hover	boolean	—
bordered	boolean	—
color	string	—
stack	boolean	—
compact	boolean	—
emptyText	string	—
manual	boolean	—
total	number	—
loading	boolean	—

事件: selection-changecell-editquery-change

插槽: toolbarcell-{key}