Table

행과 열을 비교하며 읽는 정형 데이터에 사용합니다. 정렬, 필터, 선택이 필요하면 DataTable을 사용하세요.

미리보기

관심 종목 데이터

예시 종목·가격·변동·상태를 비교하고 선택된 행과 양수·음수 변동을 확인합니다.

관심 종목 · 10분 지연 데이터
종목	가격	변동	상태
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

Registry JSON

사용법

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`	`—`	표의 목적과 데이터 범위를 설명합니다.
`TableHead`	`scope`	`"col" \| "row" \| "colgroup" \| "rowgroup"`	`—`	header가 설명하는 cell 방향을 명시합니다.
`TableRow`	`data-state`	`"selected" \| string`	`—`	선택된 행의 inset 상태를 활성화합니다.
`TableCell`	`colSpan / rowSpan`	`number`	`—`	native table cell 병합 범위입니다.

미리보기

관심 종목 데이터

설치

사용법

API 레퍼런스

접근성