データとフィードバック@neumorphism-ui/table

Table

native table、caption、thead、tbody、tfoot、tr、th、td を組み合わせます。外側の container が overflow-x-auto とニューモーフィックな raised サーフェスを提供します。

@neumorphism-ui/table

Registry JSON

プレビュー

ウォッチリスト · 10 分遅延データ
銘柄	価格	騰落	状態
NVDA	$181.92	+2.41%	取引中
005930	₩72,400	+1.08%	選択中
TSLA	$318.27	−0.64%	監視

インストール

npx shadcn@latest add @neumorphism-ui/table

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

Import

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

Example

<Table>
  <TableCaption>最近インストールしたコンポーネント</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead scope="col">コンポーネント</TableHead>
      <TableHead scope="col">カテゴリー</TableHead>
      <TableHead scope="col">状態</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Dialog</TableCell>
      <TableCell>オーバーレイ</TableCell>
      <TableCell>準備完了</TableCell>
    </TableRow>
  </TableBody>
</Table>

API リファレンス

コンポーネント	プロパティ	型	デフォルト	説明
`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 範囲です。

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ