Table

データを行と列で表示するためのテーブルコンポーネント。

Installation

npx shadcn@latest add https://kasumi-ui.vercel.app/r/table.json

Usage

名前	メール	ステータス
田中太郎	tanaka@example.com	アクティブ
佐藤花子	sato@example.com	保留中
鈴木一郎	suzuki@example.com	アクティブ

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

<Table>
<TableHeader>
  <TableRow>
    <TableHead>名前</TableHead>
    <TableHead>メール</TableHead>
    <TableHead>ステータス</TableHead>
  </TableRow>
</TableHeader>
<TableBody>
  <TableRow>
    <TableCell>田中太郎</TableCell>
    <TableCell>tanaka@example.com</TableCell>
    <TableCell>アクティブ</TableCell>
  </TableRow>
  <TableRow>
    <TableCell>佐藤花子</TableCell>
    <TableCell>sato@example.com</TableCell>
    <TableCell>保留中</TableCell>
  </TableRow>
</TableBody>
</Table>

Caption

テーブルの説明テキストをキャプションとして表示できます。

チームメンバー一覧
名前	役割
田中太郎	エンジニア
佐藤花子	デザイナー

<Table>
<TableCaption>チームメンバー一覧</TableCaption>
<TableHeader>
  <TableRow>
    <TableHead>名前</TableHead>
    <TableHead>役割</TableHead>
  </TableRow>
</TableHeader>
<TableBody>
  <TableRow>
    <TableCell>田中太郎</TableCell>
    <TableCell>エンジニア</TableCell>
  </TableRow>
</TableBody>
</Table>

Footer

集計行などをフッターとして表示できます。

項目	金額
デザイン費	¥50,000
開発費	¥120,000
合計	¥170,000

<Table>
<TableHeader>
  <TableRow>
    <TableHead>項目</TableHead>
    <TableHead className="text-right">金額</TableHead>
  </TableRow>
</TableHeader>
<TableBody>
  <TableRow>
    <TableCell>デザイン費</TableCell>
    <TableCell className="text-right">¥50,000</TableCell>
  </TableRow>
  <TableRow>
    <TableCell>開発費</TableCell>
    <TableCell className="text-right">¥120,000</TableCell>
  </TableRow>
</TableBody>
<TableFooter>
  <TableRow>
    <TableCell>合計</TableCell>
    <TableCell className="text-right">¥170,000</TableCell>
  </TableRow>
</TableFooter>
</Table>

Props

各サブコンポーネントは対応する HTML 要素の props をそのまま受け取ります。

Prop	Type	Default	Description
Table	ComponentProps<"table">	—	テーブルのルート要素。横スクロール対応のラッパー付き
TableHeader	ComponentProps<"thead">	—	テーブルのヘッダー部分
TableBody	ComponentProps<"tbody">	—	テーブルのボディ部分
TableFooter	ComponentProps<"tfoot">	—	テーブルのフッター部分。背景色付き
TableRow	ComponentProps<"tr">	—	テーブルの行。ホバー時にハイライト表示
TableHead	ComponentProps<"th">	—	テーブルのヘッダーセル
TableCell	ComponentProps<"td">	—	テーブルのデータセル
TableCaption	ComponentProps<"caption">	—	テーブルのキャプション