Table

Newv0.3.0

データを行と列で表示するテーブルコンポーネント。構造化されたデータの表示に使用します。

基本的な使い方

請求書一覧のテーブル例

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00

tsx

class="token keyword">import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
  TableCaption,
} class="token keyword">from class="token keyword">class="token string">"@/components/ui";

<class="token tag">Table>
  <class="token tag">TableCaption>請求書一覧</class="token tag">TableCaption>
  <class="token tag">TableHeader>
    <class="token tag">TableRow>
      <class="token tag">TableHead>Invoice</class="token tag">TableHead>
      <class="token tag">TableHead>Status</class="token tag">TableHead>
      <class="token tag">TableHead align=class="token keyword">class="token string">"right">Amount</class="token tag">TableHead>
    </class="token tag">TableRow>
  </class="token tag">TableHeader>
  <class="token tag">TableBody>
    {invoices.class="token function">map((invoice) => (
      <class="token tag">TableRow key={invoice.id}>
        <class="token tag">TableCell>{invoice.id}</class="token tag">TableCell>
        <class="token tag">TableCell>{invoice.status}</class="token tag">TableCell>
        <class="token tag">TableCell align=class="token keyword">class="token string">"right">{invoice.amount}</class="token tag">TableCell>
      </class="token tag">TableRow>
    ))}
  </class="token tag">TableBody>
</class="token tag">Table>

ストライプ

行の背景色を交互に変更して視認性を向上

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	Editor
Bob Johnson	bob@example.com	Viewer
Alice Brown	alice@example.com	Editor

tsx

<class="token tag">Table striped>
  <class="token tag">TableHeader>
    <class="token tag">TableRow>
      <class="token tag">TableHead>Name</class="token tag">TableHead>
      <class="token tag">TableHead>Email</class="token tag">TableHead>
      <class="token tag">TableHead>Role</class="token tag">TableHead>
    </class="token tag">TableRow>
  </class="token tag">TableHeader>
  <class="token tag">TableBody>
    <class="token tag">TableRow>
      <class="token tag">TableCell>John Doe</class="token tag">TableCell>
      <class="token tag">TableCell>john@example.com</class="token tag">TableCell>
      <class="token tag">TableCell>Admin</class="token tag">TableCell>
    </class="token tag">TableRow>
    {class="token keyword">class=class="token keyword">class="token string">"token comment">/* ... */}
  </class="token tag">TableBody>
</class="token tag">Table>

コンパクト + ボーダー

データ密度の高い表示

ID	Product	Price	Qty
001	Widget A	$10.00	5
002	Widget B	$15.00	3
003	Widget C	$20.00	8

tsx

<class="token tag">Table compact bordered>
  <class="token tag">TableHeader>
    <class="token tag">TableRow>
      <class="token tag">TableHead>ID</class="token tag">TableHead>
      <class="token tag">TableHead>Product</class="token tag">TableHead>
      <class="token tag">TableHead align=class="token keyword">class="token string">"right">Price</class="token tag">TableHead>
      <class="token tag">TableHead align=class="token keyword">class="token string">"right">Qty</class="token tag">TableHead>
    </class="token tag">TableRow>
  </class="token tag">TableHeader>
  <class="token tag">TableBody>
    <class="token tag">TableRow>
      <class="token tag">TableCell>class="token number">001</class="token tag">TableCell>
      <class="token tag">TableCell>Widget A</class="token tag">TableCell>
      <class="token tag">TableCell align=class="token keyword">class="token string">"right">$class="token number">10.00</class="token tag">TableCell>
      <class="token tag">TableCell align=class="token keyword">class="token string">"right">class="token number">5</class="token tag">TableCell>
    </class="token tag">TableRow>
  </class="token tag">TableBody>
</class="token tag">Table>

Props API

Prop	Type	Default	Description
`striped`	`boolean`	`false`	行の背景色を交互に変更
`compact`	`boolean`	`false`	コンパクトなパディング
`bordered`	`boolean`	`false`	セル間にボーダーを追加

Accessibility

適切な table, thead, tbody, tr, th, td 要素を使用
scope 属性でヘッダーとデータセルを関連付け
TableCaption でテーブルの説明を提供
align 属性で数値データは右揃えに