Table

インポート

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@caroainc/ui-components'

基本的な使い方

名前	メール	ステータス
山田太郎	[email protected]	アクティブ
鈴木花子	[email protected]	非アクティブ
田中一郎	[email protected]	アクティブ

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>名前</TableHead>
      <TableHead>メール</TableHead>
      <TableHead>ステータス</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>山田太郎</TableCell>
      <TableCell>[email protected]</TableCell>
      <TableCell>アクティブ</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>鈴木花子</TableCell>
      <TableCell>[email protected]</TableCell>
      <TableCell>非アクティブ</TableCell>
    </TableRow>
  </TableBody>
</Table>

商品一覧の例

商品名	価格	在庫
商品A	¥1,000	50
商品B	¥2,500	30
商品C	¥800	100

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>商品名</TableHead>
      <TableHead className="text-right">価格</TableHead>
      <TableHead className="text-right">在庫</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">商品A</TableCell>
      <TableCell className="text-right">¥1,000</TableCell>
      <TableCell className="text-right">50</TableCell>
    </TableRow>
  </TableBody>
</Table>

DataTableとの違い

Table	DataTable
静的な表示	ソート・フィルタ・ページネーション対応
シンプル	機能豊富
Server Component対応	Client Component必須

Table

インポート

基本的な使い方

商品一覧の例

DataTableとの違い

On this page