Table テーブル

データテーブルです。ソート（制御 / 非制御）、列フィルタ、列幅のドラッグ、多階層ヘッダー（children の無限ネスト）、固定列をサポートします。height を設定すると仮想スクロールが有効になります（rowHeight を実際の行の高さと一致させる必要があります）。

テーブル

<template>
  <div style="max-width: 760px">
    <p class="demo-note">size="small" + maxHeight + デフォルトソート（defaultSortProp/defaultSortOrder）+ フィルタ</p>
    <LhTable
      :data="rows"
      :columns="columns"
      size="small"
      stripe
      border
      :max-height="200"
      row-key="name"
      default-sort-prop="dynasty"
      default-sort-order="asc"
      :default-filtered-values="{ dynasty: ['宋'] }"
    >
      <template #price="{ value }">
        <span style="color: var(--lh-primary-color); font-weight: 600">{{ value }}</span>
      </template>
    </LhTable>
    <p class="demo-note">「朝代」列はデフォルトで昇順かつ「宋」で事前フィルタされています。ヘッダーのフィルタボタンで条件を変更できます。</p>
    <p class="demo-note" style="margin-top: 16px">ネストされたヘッダー（children）+ resizable による幅ドラッグ + formatter + カスタム sorter</p>
    <LhTable :data="rows2" :columns="groupColumns" border :height="180" :row-height="40" :sorter="dynastySorter">
      <template #price="{ value }">
        <span style="color: var(--lh-primary-color); font-weight: 600">{{ value }}</span>
      </template>
    </LhTable>
    <p class="demo-note">「伝来」列は formatter で「宮蔵 / 民間」に書式化されます。「評価額」列はドラッグで幅を変更できます（resizable）。</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    rows: [
      { name: '溪山行旅図', dynasty: '宋', price: 1800 },
      { name: '富春山居図', dynasty: '元', price: 2600 },
      { name: '千里江山図', dynasty: '宋', price: 3200 },
      { name: '清明上河図', dynasty: '宋', price: 1500 },
      { name: '韓熙載夜宴図', dynasty: '五代', price: 2100 },
    ],
    rows2: [
      { name: '溪山行旅図', dynasty: '宋', provenance: '宮蔵', price: 1800 },
      { name: '富春山居図', dynasty: '元', provenance: '宮蔵', price: 2600 },
      { name: '清明上河図', dynasty: '宋', provenance: '宮蔵', price: 1500 },
      { name: '照夜白図', dynasty: '唐', provenance: '民間', price: 980 },
    ],
    columns: [
      { prop: 'name', label: '画作', width: 160 },
      {
        prop: 'dynasty',
        label: '朝代',
        width: 120,
        sortable: true,
        filters: [
          { text: '宋', value: '宋' },
          { text: '元', value: '元' },
          { text: '五代', value: '五代' },
        ],
      },
      { prop: 'price', label: '評価額（万）', width: 140, align: 'right', slot: 'price' },
    ],
    groupColumns: [
      {
        label: '蔵品情報',
        children: [
          { prop: 'name', label: '画作', width: 150 },
          {
            prop: 'provenance',
            label: '伝来',
            width: 100,
            formatter: (r) => (r.provenance === '宮蔵' ? '宮蔵' : '民間'),
          },
        ],
      },
      {
        label: '評価額',
        children: [
          { prop: 'dynasty', label: '朝代', width: 90, sortable: true },
          { prop: 'price', label: '評価額（万）', width: 130, align: 'right', resizable: true, slot: 'price' },
        ],
      },
    ],
  }),
  methods: {
    dynastySorter(a, b) {
      const order = ['唐', '五代', '宋', '元']
      return order.indexOf(String(a.dynasty)) - order.indexOf(String(b.dynasty))
    },
  },
}
</script>

Props

プロパティ	説明	型	デフォルト値
data	行データ	LhTableRow[]	[]
columns	列の設定	LhTableColumn[]	[]
height	テーブルボディの高さ（設定すると仮想スクロールを有効化。数値は px）	number \| string	—
maxHeight	非仮想モードでの最大高さ	number \| string	—
rowHeight	仮想スクロールの行の高さ（実際の行の高さと一致させる必要あり）	number	—
stripe / border	シマ模様 / セルの罫線	boolean	false
size	サイズ	'small' \| 'default' \| 'large'	'default'
rowKey	行のキーフィールド名	string	—
defaultSortProp / defaultSortOrder	デフォルトのソート列 / 方向	string / LhTableSortOrder	—
sorter	カスタムソート関数	(a, b) => number	—
resizable	列幅のドラッグを有効化（列レベルの resizable との併用が必要。また列は数値の width でなければならない）	boolean	false
defaultFilteredValues	デフォルトのフィルタ状態（非制御。キーは列の prop）	Record<string, (string \| number)[]>	—
filteredValues	制御されたフィルタ状態（:filtered-values.sync）	Record<string, (string \| number)[]>	—
sx	sx によるレイアウト省略記法	—	—

Events

sortChange ({ prop, order })、filterChange ({ prop, values })、columnResize ({ prop, width })、update:filteredValues、rowClick (row, index)

Slots

スロット	説明
<列の slot 名>	カスタムセル。スコープ引数 { row, column, index, value }（列は column.slot で指定）
empty	データがないときの内容（デフォルトは「データなし」）

アクセシビリティ

ヘッダーは role="row" + ソート可能列には aria-sort、テーブルボディは role="row" です。 フィルタパネルは role="menu"、幅ドラッグのハンドルには aria-label と tabindex が設定され、キーボードでの左右調整をサポートします。