Table は、商品やユーザーなど、同じ種類のオブジェクトの集合を構造化して表示するコンポーネントです。最上部に見出しの Heading 行を配置し、その下に Description 行を垂直方向に並べて構成します。

1. 概要 (Overview)

説明

Table は、同じ種類のオブジェクトを行として並べ、列ごとに同じ属性を表示する形式のデータ表現です。Heading 行と Description 行は視覚的に区別できるようにし、見出しは Bold、行同士の境界には Stroke を引きます。

行内の Heading や Description を配置する順番は、デフォルトでは左から右の順で配置されます。右から左へ読む言語の場合は配置を反転する必要があります。

リンク

• Storybook
• GitHub

2. 構成要素 (Anatomy)

Heading

見出しの役割を果たす行です。Font Weight は Bold にし、行の下側（Heading 行と Description 行の境界）には Primary の Stroke を引きます。

必須/任意: 必須

Description

データを表す行です。行の下側（行同士の境界）には Secondary の Stroke を引きます。

必須/任意: 必須（1 行以上）

Align

Heading と Description は、セルごとに Align を指定できます。Align は Start / End から選択でき、デフォルトでは Start（左揃え）です。扱うデータが数値型の場合は End（右揃え）にすることで可読性が高まります。

3. 使い分け (Usage)

いつ使うか

• 同じ種類のオブジェクトの集合を、列単位で属性を揃えて表示したいとき
• 3 列以上の構造化されたデータを並べたいとき

いつ使わないか

Interactive Table を使用したほうがよい場合

オブジェクトの集合とユーザーがインタラクティブにやりとりする必要がある場合は、Interactive Table の使用を検討します。

異なるオブジェクトを同じ Table 内に混在させない

商品オブジェクトとユーザーオブジェクトなど、異なるオブジェクトを同じ Table に混在させることはできません。種類ごとに Table を分けます。

画面サイズが大きい場合は適切な最大幅を設ける

Table の外側の領域の最大幅を調整せずに Table を極端に拡大しないでください。コンテンツの可読性が落ちる可能性があります。

類似コンポーネントとの違い

• Interactive Table: 行に対するインタラクション（選択・並べ替え・編集など）が必要な場合に使う。
• Description List: 1 つのオブジェクトに対する Key と Value のペアの表示に使う。

4. バリエーション (Variants)

Density

密度を決定します。

	Modifier class
Dense	.-density-dense
Normal*	.-density-normal
Comfort	.-density-comfort

Size

サイズを決定します。

	Modifier class
S	.-size-s
M*	.-size-m
L	.-size-l

Background

行に交互の背景色を適用します。奇数行と偶数行で異なる背景色が表示されます。

	Modifier class
なし*	-
あり	.-has-background

Grid Border

格子状のボーダーを表示します。

	Modifier class
なし*	-
あり	.-has-grid-border

実装

Table のセルは Cell を継承しています。詳細はCellを参照してください。

Mixin-based

HTML

<table class="table-component" aria-label="国別データ">
  <thead>
    <tr>
      <th scope="col">国</th>
      <th scope="col">首都</th>
      <th scope="col" class="-align-end">人口</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>アメリカ合衆国</td>
      <td>ワシントンD.C.</td>
      <td class="-align-end">390,000,000</td>
    </tr>
    <tr>
      <td>日本</td>
      <td>東京</td>
      <td class="-align-end">120,000,000</td>
    </tr>
  </tbody>
</table>

SCSS

@use '@pepabo-inhouse/components-web' as inhouse;

.table-component {
  @include inhouse.table-style(
    $option: (
      density: normal,
      size: m,
      hasBackground: false,
      hasGirdBorder: false,
    )
  );
}

オプション

• density: テーブルの密度（dense / normal / comfort）
• size: テーブルのサイズ（s / m / l）
• hasBackground: 行に交互の背景色を適用（true / false）
• hasGirdBorder: セルに格子状のボーダーを表示（true / false）

Class-based

HTML

<table class="in-table -density-normal -size-m" aria-label="国別データ">
  <thead>
    <tr>
      <th scope="col">国</th>
      <th scope="col">首都</th>
      <th scope="col" class="-align-end">人口</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>アメリカ合衆国</td>
      <td>ワシントンD.C.</td>
      <td class="-align-end">390,000,000</td>
    </tr>
    <tr>
      <td>日本</td>
      <td>東京</td>
      <td class="-align-end">120,000,000</td>
    </tr>
  </tbody>
</table>

SCSS

@use '@pepabo-inhouse/components-web' as inhouse;

@include inhouse.table-export;

5. ステート (States)

Table 自体はインタラクションを起こさないため、固有のステートは持ちません。Table 内に含まれるテキストリンクなどは、それぞれのコンポーネントのステートに従います。

6. アクセシビリティ (Accessibility)

このコンポーネント固有のチェック項目です。コントラスト・フォーカス可視化など全コンポーネント共通の原則はアクセシビリティガイドラインを参照してください。

• ルート要素には <table> を用い、見た目を整える目的だけで <div> などに置き換えない
• Heading 行のセルには <th scope="col"> を設定し、列見出しであることを伝える
• Table の目的が分かるように aria-label または <caption> を付与する
• 数値列の text-align を End にする場合も、Heading の scope と Description のアライメントは独立して指定する
• 横スクロールが必要な大きさになる場合は、スクロール領域を明示し、キーボードでもスクロールできるようにする

7. ライティング (Writing)

• Heading のラベルは列の内容を簡潔に示す名詞にする（例: 「商品名」「金額」「在庫」）
• 列ごとに文体・粒度を揃える（例: 数値の桁区切り、日付フォーマット、ステータスの語彙）
• 「-」「なし」「未設定」のような空値の表記をテーブル全体で統一する
• 「商品の名前」「商品名（表示用）」のような重複や冗長な表現は避ける