Table
通常表格顯示 + x-table-scroll 包裝，溢出時橫捲才顯示左右按鈕與漸層淡入。內容不溢出時包裝透明 (無額外貢獻)。非表格專用，也可用於卡片列表 / 圖像條帶等。
default plain table — <x-table-scroll> ラッパーなし (narrow content)
| ID | 名前 | ステータス |
|---|---|---|
| 1 | 田中 | active |
| 2 | 山田 | inactive |
| 3 | 佐藤 | active |
<x-table-scroll> wrapping wide table — 12 カラム (横スクロール発生)
| ID | ユーザー名 | メール | 会社 | 部署 | 役職 | 入社日 | 最終ログイン | ロール | プラン | ステータス | アクション |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 1001 | tatun55 | tatun@example.com | Yakaze Tech Studio | 開発 | 代表 | 2024-04-01 | 2026-05-13 09:32 | admin | enterprise | active | |
| 1002 | akari_y | akari@example.com | Sparrowhawk Labs | デザイン | リード | 2024-09-15 | 2026-05-13 08:11 | editor | pro | active | |
| 1003 | kenji_o | kenji@example.com | Pinion Inc. | 営業 | マネージャー | 2025-02-01 | 2026-05-12 22:54 | editor | pro | invited | |
| 1004 | misaki_t | misaki@example.com | Anonymous Co. | CS | スタッフ | 2025-07-10 | 2026-05-13 10:01 | viewer | free | active | |
| 1005 | ryouta_n | ryouta@example.com | Earthsea LLC | エンジニアリング | シニア | 2023-11-20 | 2026-05-13 09:58 | admin | enterprise | suspended |
narrow table — overflow しないのでボタンも fade も出ない
| ID | 名前 | ステータス |
|---|---|---|
| 1 | 田中 | active |
| 2 | 山田 | inactive |
card list — table 以外の wide content (画像ストリップ・カード列)
アイテム #1
説明文がここに入る
アイテム #2
説明文がここに入る
アイテム #3
説明文がここに入る
アイテム #4
説明文がここに入る
アイテム #5
説明文がここに入る
アイテム #6
説明文がここに入る
アイテム #7
説明文がここに入る
アイテム #8
説明文がここに入る
アイテム #9
説明文がここに入る
アイテム #10
説明文がここに入る
アイテム #11
説明文がここに入る
アイテム #12
説明文がここに入る
buttonStyle="flat" — 角ばった button (radius-field 準拠)
| ID | ユーザー名 | メール | 会社 | 部署 | 役職 | 入社日 | 最終ログイン | ロール | プラン | ステータス | アクション |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 1001 | tatun55 | tatun@example.com | Yakaze Tech Studio | 開発 | 代表 | 2024-04-01 | 2026-05-13 09:32 | admin | enterprise | active | |
| 1002 | akari_y | akari@example.com | Sparrowhawk Labs | デザイン | リード | 2024-09-15 | 2026-05-13 08:11 | editor | pro | active | |
| 1003 | kenji_o | kenji@example.com | Pinion Inc. | 営業 | マネージャー | 2025-02-01 | 2026-05-12 22:54 | editor | pro | invited | |
| 1004 | misaki_t | misaki@example.com | Anonymous Co. | CS | スタッフ | 2025-07-10 | 2026-05-13 10:01 | viewer | free | active | |
| 1005 | ryouta_n | ryouta@example.com | Earthsea LLC | エンジニアリング | シニア | 2023-11-20 | 2026-05-13 09:58 | admin | enterprise | suspended |
showButtons=false — ボタン非表示、ネイティブスクロールのみ
| ID | ユーザー名 | メール | 会社 | 部署 | 役職 | 入社日 | 最終ログイン | ロール | プラン | ステータス | アクション |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 1001 | tatun55 | tatun@example.com | Yakaze Tech Studio | 開発 | 代表 | 2024-04-01 | 2026-05-13 09:32 | admin | enterprise | active | |
| 1002 | akari_y | akari@example.com | Sparrowhawk Labs | デザイン | リード | 2024-09-15 | 2026-05-13 08:11 | editor | pro | active | |
| 1003 | kenji_o | kenji@example.com | Pinion Inc. | 営業 | マネージャー | 2025-02-01 | 2026-05-12 22:54 | editor | pro | invited | |
| 1004 | misaki_t | misaki@example.com | Anonymous Co. | CS | スタッフ | 2025-07-10 | 2026-05-13 10:01 | viewer | free | active | |
| 1005 | ryouta_n | ryouta@example.com | Earthsea LLC | エンジニアリング | シニア | 2023-11-20 | 2026-05-13 09:58 | admin | enterprise | suspended |
使い方
<x-table-scroll>
<table class="min-w-[1000px] w-full">
...
</table>
</x-table-scroll>
{{-- ボタンを四角くしたい --}}
<x-table-scroll button-style="flat"> ... </x-table-scroll>
{{-- スクロール量を変えたい (viewport 比、default 0.6) --}}
<x-table-scroll :scroll-amount="0.8"> ... </x-table-scroll>
{{-- ボタンを出さない (ネイティブスクロールのみ) --}}
<x-table-scroll :show-buttons="false"> ... </x-table-scroll>
{{-- 背景色を合わせる (fade gradient の起点色) --}}
<x-table-scroll fade-color="base-200"> ... </x-table-scroll>