Dictionary

役割と種類

Tableは、商品やユーザーなど、オブジェクトの集合を表示します。最上部にHeadingを組み合わせた行を配置し、その下にDescriptionを組み合わせた行を垂直方向に並べて構成されます。

構成要素

Heading行とDescription行で構成されます。これらは視覚的に区別できる必要があります。

Heading

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

Description

Description行は、行の下側（行同士の境界）にはSecondaryのStrokeを引きます。

整列

HeadingとDescriptionは、Alignを指定できます。Alignは、Start / Endから選択でき、デフォルトではStart（左揃え）です。

扱うデータが数値型の場合

扱うデータが数値型の場合は、End（右揃え）にすることで可読性が高まります。

いつ使うべきか / 使わないべきか

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

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

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

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

補足

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

Interaction

Table自体はインタラクションを起こしません。ただし、Table内に含まれるテキストリンクなどは画面遷移などのインタラクションを起こします。

Style

Tableのセルは、Cellを継承しています。

外観

Density

密度を決定します。 Dense / Normal / Comfort から選択できます。

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

Size

サイズを決定します。 S / M / L から選択できます。

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

Background

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

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

Grid Border

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

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

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;

注意点

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

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