テーブルと 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}