Bảng & DataTable

Table tạo kiểu cho bảng thường (sọc, hover, viền, gọn, bảng màu). DataTable là component đầy đủ: sắp xếp, tìm kiếm, phân trang, chọn dòng, ẩn cột theo màn hình, sửa trực tiếp và chế độ phía server — mọi chữ đều được dịch.

Bảng thường

Bảng thường

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>

Cột

Trường	Kiểu	Mô tả
key	string	Tên trường (và tên slot ô cell-{key} / thlCell="{key}")
title	string / node	Tiêu đề cột
value	(row) => unknown	Hàm lấy giá trị để sắp xếp/tìm kiếm (mặc định row[key])
sortable	boolean	Bấm tiêu đề để sắp xếp tăng → giảm → bỏ
compare	(a, b) => number	Hàm so sánh tuỳ biến
searchable	boolean	Có tham gia tìm kiếm chung không (mặc định true)
align	'left' | 'center' | 'right'
width	string | number
hideBelow	number (px)	Ẩn cột dưới độ rộng này
editable	boolean	Sửa trực tiếp → sự kiện cell-edit
render	chỉ React	Hàm render ô

Chế độ phía server

Đặt manual và total, rồi tải dữ liệu khi có sự kiện 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	Kiểu	Mặc định
striped	boolean	—
hover	boolean	—
bordered	any	—
compact	boolean	—
color	string	—
full	string	—

Slot: default

DataTable

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

Prop	Kiểu	Mặc định
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	—

Sự kiện: selection-changecell-editquery-change

Slot: toolbarcell-{key}