Table

データを行と列の形式で整理して表示するコンポーネント。ユーザー一覧や商品リストの表示に使用します。

Basic

jui-table の最も基本的な使用例です。

関連コンポーネント

  • Pagination - ページネーション
  • Skeleton - ローディング表示
  • Card - コンテンツのカード表示

ブラウザ対応

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能用途ChromeFirefoxSafariステータス
position: stickyテーブルヘッダーの固定表示（オプション時）56+32+6.1+Baseline 2017
Flexboxソート用ボタン・アイコンの整列配置29+22+9+Baseline 2017
CSS 変数 (var())デザイントークン（枠線、背景、文字間隔、トランジション等）適用49+31+9.1+Baseline 2017

💡 いずれの機能も主要ブラウザで広く対応済みです。

Baseline 情報

機能Baseline 達成Widely Available 予定
position: sticky2017年2020年前半 ✅
Flexbox2017年2020年前半 ✅
CSS 変数2017年2020年前半 ✅

アクセシビリティ

  • WAI-ARIA:
    • table、thead、tbody、tr、th、td の標準的なテーブル構造セマンティクスに準拠しています。
    • caption スロットを提供しており、テーブルの用途や要約を説明するキャプションをスクリーンリーダー向けに設定できます。
  • キーボードナビゲーション:
    • ソートが可能な列ヘッダー（columns で定義された sortable: true の列）には内部的にフォーカス可能な <button> 要素が生成され、Tab キーでフォーカスし、Enter または Space キーでソート処理を確定できます。
    • データ行自体は通常は対話型ではないため、キーボード操作の対象外となります。

CSS カスタムプロパティ

このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークンを参照してスタイルが適用されます。

プロパティ

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

PropertyAttributeDescriptionTypeDefault
columnscolumns列定義（JSON文字列 or 配列）TableColumn[] | string'[]'
datadata行データ（JSON文字列 or 配列）object[] | string'[]'
hoverablehoverable行ホバー効果booleanfalse
sizesizeセルのサイズ"md" | "sm"'md'
stripedstriped交互行の背景色booleanfalse

イベント

コンポーネントから発火するカスタムイベントの一覧です。

EventDescriptionType
juiSortソート変更時に発火CustomEvent<{ column: string; direction: "desc" | "asc"; }>

スロット

コンポーネント内に子要素を挿入するためのスロット一覧です。

SlotDescription
"caption"テーブルのキャプション（アクセシビリティ用）

シャドウパーツ

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

PartDescription
"cell"データセル
"header-cell"ヘッダーセル
"row"各行
"table"ルートの table 要素
"tbody"テーブルボディ
"thead"テーブルヘッダー

Built with StencilJS