テーブルTableBeta

列見出しと行データを組み合わせて、比較しやすい一覧を表示する表コンポーネントです。

項目	状態	金額
API	完了	¥12,000
ドキュメント	確認中	¥8,000

状態とバリエーション

ストライプ

行数が多い読み取り専用の表では、交互の背景色で横方向の読み取りを補助します。

項目	状態	担当
API	完了	佐藤
ドキュメント	確認中	鈴木
デザイン	未着手	高橋

フッター

合計や集計値はフッター行にまとめ、本文の明細行と分けて示します。

項目	状態	金額
API	完了	¥12,000
ドキュメント	確認中	¥8,000
合計		¥20,000

キャプション

表の対象期間や集計範囲を、表の構造に含めて補足します。

リリース前確認の担当一覧です。
項目	期限	担当
アクセシビリティ確認	5月28日	佐藤
公開前レビュー	5月30日	鈴木

横スクロール

小さい画面では列を無理に縮めず、表に最小幅を持たせて横方向にスクロールできるようにします。

項目	状態	担当	期限	最終更新
アクセシビリティ確認	確認中	佐藤	5月28日	5月26日 10:00
公開前レビュー	未着手	鈴木	5月30日	5月25日 18:30

横スクロールの封じ込め

Table と DataTable は横スクロールを自分の枠内に封じ込めます（内部で [contain:paint] を付与済み）。狭い画面（375px 等）で、幅の広い内側要素を overflow-x-auto のスクローラに入れると、ページ全体に横スクロールが漏れることがあります（body.scrollWidth は据え置きでも html.scrollWidth が膨らむ）。祖先の min-w-0 や sticky 除去では直らず、スクローラ自身の [contain:paint] だけが効きます。自前の幅広コンテンツ（カスタムグリッド・チャート・図表）を横スクロールさせる時は、スクローラに [contain:paint] を付けてください：

<div className="overflow-x-auto [contain:paint]">
  {/* wide content — a chart, a custom grid, a diagram */}
</div>

プロパティ

Table

表は横にスクロールできます

プロパティ	型	初期値	説明
striped	boolean	false	本文行の背景色を交互に変えます。
className	string	-	表全体の幅やセルの見え方を調整するクラスです。

Table の構成要素

表は横にスクロールできます

プロパティ	型	初期値	説明
className	string	-	行、見出し、セルに追加するクラスです。
children	ReactNode	-	見出し行、本文行、フッター行、セルなどの内容です。

使い方

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@gunjo/ui";

export function Example() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>項目</TableHead>
          <TableHead>状態</TableHead>
          <TableHead className="text-right">金額</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell className="font-medium">API</TableCell>
          <TableCell>完了</TableCell>
          <TableCell className="text-right">¥12,000</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">ドキュメント</TableCell>
          <TableCell>確認中</TableCell>
          <TableCell className="text-right">¥8,000</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

使用コンポーネント

Table TableHeader TableBody TableRow TableCell TableCaption

DataTable MetadataList MarkdownRenderer

設計の判断（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIコンポーネント: Table 比較・検討の支援 (Comparison / Decision Support)