Table

テーブル

GitHub でソースを見る

プレビュー

名前メール役割
堀内昌平shohei.horiuchi@norn.co.jp管理者
志摩このみkonomi.shima@norn.co.jp編集者
野々村圭kei.nonomura@norn.co.jp閲覧者

並べ替え（売上の降順）

渋谷¥4,820,000+12.4%
梅田¥3,915,000+3.1%
天神¥2,140,000−1.8%

使いどころ

使う場面

  • 同じ項目を持つ複数のデータを、行と列で比べる（ユーザー一覧、請求履歴、成績表）
  • 数値の列は右揃えにして、桁をそろえる。TableCell に className="table__cell--numeric" を付けると、右揃えと等幅数字（tabular-nums）になる。見出しのセルは左揃えのまま
  • 並べ替えられる列は、TableHead に onSort と sortDirection を渡す。見出しがボタンになり、矢印が付く。並べ替えの状態管理は useTableSort が引き受ける（押すたびに 昇順、降順、解除）
  • 行数が多いときは compact で密度を上げる。Table は横にあふれると table-wrapper 内でスクロールする

使わない場面

  • 1 件ずつの詳細表示や、列が 2 つ程度の項目と値の組。DescriptionList を使う
  • 見た目を揃えるためのレイアウト。Grid や layout を使う
  • モバイルで列が多い一覧をそのまま出すこと。重要な列に絞るか、List に切り替える

使い方

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, useTableSort } from "kaze-design-system";

const rows = [
  { store: "渋谷", sales: 4820000 },
  { store: "梅田", sales: 3915000 },
];
const { rows: sorted, getSortProps } = useTableSort(rows, {
  initial: { key: "sales", direction: "descending" },
});

<Table>
  <TableHeader>
    <TableRow>
      <TableHead {...getSortProps("store")}>店舗</TableHead>
      <TableHead className="table__cell--numeric" {...getSortProps("sales")}>売上</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {sorted.map((row) => (
      <TableRow key={row.store}>
        <TableCell>{row.store}</TableCell>
        <TableCell className="table__cell--numeric">{row.sales}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

プロパティ

名前型デフォルト説明
compactbooleanなし行の高さを詰める
Tableコンポーネントなしテーブルのルート要素
TableHeaderサブコンポーネントなしテーブルのヘッダー部分（thead）
TableBodyサブコンポーネントなしテーブルの本体部分（tbody）
TableRowサブコンポーネントなしテーブルの行（tr）
TableHeadサブコンポーネントなしヘッダーセル（th）。onSort を渡すと見出しが並べ替えボタンになり、sortDirection（ascending / descending / none）で矢印と aria-sort が決まる
TableCellサブコンポーネントなしデータセル（td）

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

キーボード操作

キー動作
TabonSort がある列見出しのボタンにフォーカスを移す
Enter / Spaceその列で並べ替える（昇順、降順、解除の順に切り替わる）

アクセシビリティ

  • TableHead は scope="col" が既定。行見出しの列には scope="row" を指定する
  • 表のタイトルは、近くの見出しか aria-label / aria-labelledby で付ける。Table 自体は名前を持たない
  • 並べ替え中の列には aria-sort が付く（並べ替えていない列には付けない）。並べ替えるかどうかは onSort で利用側が決める。選択の状態は、見た目だけにせずチェックボックスのラベルで伝える
  • onSort を渡した見出しは <button> になる。Tab で見出しにフォーカスし、Enter か Space で並べ替える。矢印は装飾で、状態は aria-sort で伝わる

文言

  • 列見出しは名詞で短く。単位は見出しに入れる（「金額（円）」）。セルごとに単位を繰り返さない
  • 数値は小数の桁数をそろえ、3 桁区切りにする。空欄は「-」を使い、0 と区別する

関連するコンポーネント