125k

Table

PreviousNext

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

BaseRadixReact Aria
最近の請求書の一覧です。
請求書ステータス支払い方法金額
INV001支払い済みクレジットカード$250.00
INV002保留中PayPal$150.00
INV003未払い銀行振込$350.00
INV004支払い済みクレジットカード$450.00
INV005支払い済みPayPal$550.00
INV006保留中銀行振込$200.00
INV007未払いクレジットカード$300.00
合計$2,500.00
import {
  Table,
  TableBody,

インストール

pnpm dlx shadcn@latest add table

使い方

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
<Table>
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

構成

次の構成を使用して、Table を構築します。

Table
├── TableCaption
├── TableHeader
│   └── TableRow
│       ├── TableHead
│       ├── TableHead
│       ├── TableHead
│       └── TableHead
├── TableBody
│   ├── TableRow
│   │   ├── TableCell
│   │   ├── TableCell
│   │   ├── TableCell
│   │   └── TableCell
│   └── TableRow
│       ├── TableCell
│       ├── TableCell
│       ├── TableCell
│       └── TableCell
└── TableFooter

フッター

<TableFooter /> コンポーネントを使用して、テーブルにフッターを追加します。

最近の請求書の一覧です。
請求書ステータス支払い方法金額
INV001支払い済みクレジットカード$250.00
INV002保留中PayPal$150.00
INV003未払い銀行振込$350.00
合計$2,500.00
import {
  Table,
  TableBody,

アクション

<DropdownMenu /> コンポーネントを使用した各行のアクションを示すテーブル。

商品価格操作
ワイヤレスマウス$29.99
メカニカルキーボード$129.99
USB-Cハブ$49.99
import { MoreHorizontalIcon } from "lucide-react"

import { Button } from "@/components/ui/base/button"

データ テーブル

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

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

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

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

قائمة بفواتيرك الأخيرة.
الفاتورةالحالةالطريقةالمبلغ
INV001مدفوعبطاقة ائتمانية$250.00
INV002قيد الانتظارPayPal$150.00
INV003غير مدفوعتحويل بنكي$350.00
INV004مدفوعبطاقة ائتمانية$450.00
INV005مدفوعPayPal$550.00
INV006قيد الانتظارتحويل بنكي$200.00
INV007غير مدفوعبطاقة ائتمانية$300.00
المجموع$2,500.00
"use client"

import * as React from "react"