Components

Table

Docs

Table API 사용가이드입니다. 조합 예시는 Overview를 참고하세요.

API

Table · TableHeader · TableBody · TableFooter · TableRow · TableHead · TableCell · TableCaption을 조합합니다. 데이터 배열은 Root prop이 아니라 호출측에서 map해 Row/Cell로 렌더합니다.

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

const invoices = [
  { id: "INV001", status: "Paid", method: "Credit Card", amount: "$250.00" },
  { id: "INV002", status: "Pending", method: "PayPal", amount: "$150.00" },
];

<Table>
  <TableCaption>최근 인보이스 목록</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {invoices.map((row) => (
      <TableRow key={row.id}>
        <TableCell className="font-medium">{row.id}</TableCell>
        <TableCell>{row.status}</TableCell>
        <TableCell>{row.method}</TableCell>
        <TableCell className="text-right">{row.amount}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Props

Name	Type	Default	Description
`Table.containerClassName`	`string`	—	가로 스크롤 래퍼(div) className. Table.className은 <table>에 적용됩니다.
`Table.* / Header.* / …`	`native HTML attributes`	—	각 파트는 대응 native 요소 props를 받습니다. 예: TableCell.colSpan, TableHead.scope, TableRow.data-state.
`TableRow.data-state`	`"selected" \| string`	—	data-state="selected"면 기본 selected 배경(bg-action-secondary-pressed)이 적용됩니다. className으로 덮을 수 있습니다.
`className`	`string`	—	각 파트의 추가 클래스. Header/Footer/Row에 bg-* · hover:bg-* 등을 주면 기본 색보다 우선합니다. Head/Cell 패딩도 동일.

Events

Name	Signature	Description
`onClick 등`	`native event handlers`	Row · Cell 등에 onClick · onKeyDown 등 native 핸들러를 그대로 전달할 수 있습니다.

Notes

소비 앱 필수: React 19, Tailwind CSS v4, ClaBi tokens.css(+ @theme 매핑), clsx.
clsx 패키지가 필수입니다. className 병합에 import { clsx } from "clsx" 를 사용합니다.
옵션 목록/데이터는 Root prop이 아닙니다. 호출측에서 map해 children으로 전달하세요.
셀 패딩은 반응형입니다. 모바일 compact(px-12/py-8) · md+ medium(p-16). Head는 h-9/px-12 · md:h-12/px-16.
Head/Cell className에 패딩(또는 Head의 height) 유틸이 있으면 기본 패딩을 적용하지 않습니다.
가로 스크롤은 Table 래퍼(overflow-x-auto)가 담당합니다.
기본 색: Header/Footer bg-surface-neutral-subtle, Row bg-surface-default, hover:bg-action-secondary-hover, selected:bg-action-secondary-pressed.
색상 커스텀은 TableHeader · TableRow 등 className으로 전달합니다 (다른 UI 컴포넌트와 동일).
selected 스타일은 data-state="selected"가 있는 행에만 적용됩니다.