Docs
テーブル

テーブル

レスポンシブテーブルコンポーネント。

A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PaidCredit Card$250.00
INV002PendingPayPal$150.00
INV003UnpaidBank Transfer$350.00
INV004PaidCredit Card$450.00
INV005PaidPayPal$550.00
INV006PendingBank Transfer$200.00
INV007UnpaidCredit Card$300.00
Total$2,500.00

インストール

npx shadcn-ui@latest add table

使用方法

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
<Table>
  <TableCaption>最近の請求書の一覧です。</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">請求書</TableHead>
      <TableHead>ステータス</TableHead>
      <TableHead>方法</TableHead>
      <TableHead className="text-right">金額</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">INV001</TableCell>
      <TableCell>支払い済み</TableCell>
      <TableCell>クレジットカード</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

データ テーブル

<Table /> コンポーネントを使用して、より複雑なデータ テーブルを構築できます。@tanstack/react-table と組み合わせて、ソート、フィルタリング、ページネーション機能を備えたテーブルを作成します。

詳細については、データ テーブル のドキュメントを参照してください。

また、タスク デモでデータテーブルの例を確認することもできます。