테이블

테이블

테이블은 반응형으로 동작하는 표 컴포넌트예요. 데이터를 행과 열로 정리해 보여줄 때 기본적으로 쓰는 구조죠. shadcn/ui의 테이블은 시맨틱한 <table> 요소를 그대로 활용해서, 다양한 화면 크기에서도 보기 좋게 반응한답니다.

출처: 문서

본문

설치하기

init 명령으로 프로젝트를 초기화했다면, 다음 명령어로 테이블 컴포넌트를 바로 추가할 수 있어요.

CLI Manual 
npx shadcn@latest add table

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

사용하기

테이블 관련 컴포넌트들을 import 하고, 아래처럼 조합해서 표를 구성해 주세요. <Table>, <TableHeader>, <TableBody>, <TableRow>, <TableCell>, <TableHead> 등이 기본 골격을 이뤄요.

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

<Table>
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

데이터 테이블

<Table /> 컴포넌트로 더 복잡한 데이터 테이블도 만들 수 있어요. @tanstack/react-table을 함께 조합하면 정렬, 필터링, 페이지네이션까지 갖춘 테이블을 구현할 수 있답니다.

자세한 내용은 데이터 테이블 문서를 참고해 주세요.

실제 데이터 테이블 예시는 Tasks 데모에서도 확인할 수 있어요.

더 알아보기 (Learn more)