ui:table

レスポンシブなテーブルコンポーネントです。

• Web Component (<ui-table>) として提供しています。
• WAI-ARIA Authoring Practices の Table Pattern に準拠しています。

Examples

Default

Source Code

<ui-table class="ui:table">
  <table>
    <caption>会員一覧</caption>
    <thead>
      <tr>
        <th scope="col">名前</th>
        <th scope="col">メール</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>田中 太郎</td>
        <td>tanaka@example.com</td>
      </tr>
      <tr>
        <td>佐藤 花子</td>
        <td>sato@example.com</td>
      </tr>
    </tbody>
  </table>
</ui-table>

Horizontal scroll (data-scroll)

data-scroll を付けると、コンテナ幅が 800px を下回ったときに横スクロール可能になります。

Source Code

<ui-table class="ui:table" data-scroll>
  <table>
    <caption>四半期売上</caption>
    <thead>
      <tr>
        <th scope="col">支社</th>
        <th scope="col">Q1</th>
        <th scope="col">Q2</th>
        <th scope="col">Q3</th>
        <th scope="col">Q4</th>
        <th scope="col">合計</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>東京</td>
        <td>120</td>
        <td>135</td>
        <td>142</td>
        <td>158</td>
        <td>555</td>
      </tr>
      <tr>
        <td>大阪</td>
        <td>98</td>
        <td>105</td>
        <td>112</td>
        <td>120</td>
        <td>435</td>
      </tr>
    </tbody>
  </table>
</ui-table>

Custom threshold (--ui-table-min-width)

しきい値は CSS 変数 --ui-table-min-width で指定できます。 インライン style で個別指定するか、独自クラスを当てて CSS 側で設定してください。

Source Code

<ui-table class="ui:table" data-scroll style="--ui-table-min-width: 600px">
  <table>
    <caption>製品仕様</caption>
    <thead>
      <tr>
        <th scope="col">項目</th>
        <th scope="col">仕様</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>サイズ</td>
        <td>W 180 × H 90 × D 60 mm</td>
      </tr>
      <tr>
        <td>重量</td>
        <td>240g</td>
      </tr>
    </tbody>
  </table>
</ui-table>

Variants

属性 / CSS変数	要素	値	効果
data-scroll	root	-	横スクロールを有効化
--ui-table-min-width	root (data-scroll 併用)	CSS の <length>	スクロール開始しきい値。既定 800px

Keyboard Controll

横スクロールが可能な時に、キーボードコントロールが動作します。

キー	動作
Left Arrow ← Left Arrow ← / Right Arrow → Right Arrow →	横スクロール

Behavior

• <caption> のテキストを 外部 .ui:table__caption として table の前に挿入します
  • 元の <caption> は DOM に残り、スクリーンリーダーがテーブルの名前として認識します
  • 視覚的には <caption> を隠し、外部キャプションだけを表示します（スクロールに引っ張られない）
• data-scroll 有効時、コンテナ幅 < しきい値 のときだけ「この表は横スクロールできます」のヒントを表示します
• スクロール領域は tabindex="0" でキーボードからもアクセス可能です

Progressive Enhancement

<ui-table> は Light DOM の Web Component です。Shadow DOM を使わないため、JS がロードされる前でも中の <table> は通常通りレンダリングされます。

ブラウザは未定義のカスタム要素を HTMLUnknownElement として扱うため、<ui-tabs> 自体はパース時に存在し、Web Componentsライフサイクル管理（接続 / 切断）はブラウザが自動的に行います。