데이터와 피드백@neumorphism-ui/table

Table

native table 요소와 caption, thead, tbody, tfoot, tr, th, td를 조합합니다. 외부 container가 overflow-x-auto와 뉴모피즘 raised 표면을 제공합니다.

@neumorphism-ui/table

미리보기

관심 종목 · 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 토큰, 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">Component</TableHead>
      <TableHead scope="col">Category</TableHead>
      <TableHead scope="col">Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Dialog</TableCell>
      <TableCell>Overlay</TableCell>
      <TableCell>Ready</TableCell>
    </TableRow>
  </TableBody>
</Table>

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`Table`	`children`필수	`React.ReactNode`	`—`	caption과 table section을 배치합니다.
`TableCaption`	`children`	`React.ReactNode`	`—`	표의 목적과 데이터 범위를 설명합니다.
`TableHead`	`scope`	`"col" \| "row" \| "colgroup" \| "rowgroup"`	`—`	header가 설명하는 cell 방향을 명시합니다.
`TableRow`	`data-state`	`"selected" \| string`	`—`	선택된 행의 inset 상태를 활성화합니다.
`TableCell`	`colSpan / rowSpan`	`number`	`—`	native table cell 병합 범위입니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성