Table
行と列を比較して読む構造化データに使います。並べ替え、絞り込み、選択には DataTable を使います。
プレビュー
ウォッチリストのデータ
例示用の銘柄、価格、変動、状態を比較し、選択行と正負の変動も確認します。
| 銘柄 | 価格 | 騰落 | 状態 |
|---|---|---|---|
| NVDA | $181.92 | +2.41% | 取引中 |
| 005930 | ₩72,400 | +1.08% | 選択中 |
| TSLA | $318.27 | −0.64% | 監視 |
インストール
この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。
npx shadcn@latest add @neumorphism-ui/table共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。
ウォッチリストのデータ
npx shadcn@latest add @neumorphism-ui/badge @neumorphism-ui/table使い方
TableCaption、scope を指定した TableHead、TableBody の行を組み合わせます。小画面でスクロールしても関係が保たれるよう、表の要素で構成します。
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
export default function Example() {
return (
<Table>
<TableCaption>Workspace projects</TableCaption>
<TableHeader><TableRow><TableHead scope="col">Project</TableHead><TableHead scope="col">Seats</TableHead></TableRow></TableHeader>
<TableBody><TableRow><TableCell>Atlas</TableCell><TableCell>12</TableCell></TableRow></TableBody>
</Table>
);
}API リファレンス
native table、caption、thead、tbody、tfoot、tr、th、td を組み合わせます。外側の container が overflow-x-auto とニューモーフィックな raised サーフェスを提供します。
| コンポーネント | プロパティ | 型 | デフォルト | 説明 |
|---|---|---|---|---|
Table | children必須 | React.ReactNode | — | caption と table section を配置します。 |
TableCaption | children | React.ReactNode | — | table の目的とデータ範囲を説明します。 |
TableHead | scope | "col" | "row" | "colgroup" | "rowgroup" | — | header が説明する cell の方向を指定します。 |
TableRow | data-state | "selected" | string | — | 選択された行の inset 状態を有効にします。 |
TableCell | colSpan / rowSpan | number | — | native table cell の span 範囲です。 |
アクセシビリティ
- 01
TableCaption で table の目的を説明し、視覚的に隠す場合は sr-only class を使用してください。
- 02
列と行の header には、意味に応じた scope を設定してください。
- 03
layout だけを目的として Table を使用せず、CSS grid または flex を使用してください。