Table

데이터를 행과 열로 구성하여 표시하는 테이블

Basic Usage

구조화된 데이터를 표시하는 기본 테이블입니다.

최근 청구 내역
Invoice	상태	결제 방법	금액
INV001	완료	신용카드	250,000원
INV002	대기	계좌이체	150,000원
INV003	완료	신용카드	350,000원
INV004	취소	계좌이체	450,000원
합계			1,200,000원

tsx

<Table>
  <TableCaption>최근 청구 내역</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">Invoice</TableHead>
      <TableHead>상태</TableHead>
      <TableHead>결제 방법</TableHead>
      <TableHead className="text-right">금액</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {invoices.map((invoice) => (
      <TableRow key={invoice.invoice}>
        <TableCell className="font-medium">{invoice.invoice}</TableCell>
        <TableCell>{invoice.status}</TableCell>
        <TableCell>{invoice.method}</TableCell>
        <TableCell className="text-right">{invoice.amount}원</TableCell>
      </TableRow>
    ))}
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={3}>합계</TableCell>
      <TableCell className="text-right">1,200,000원</TableCell>
    </TableRow>
  </TableFooter>
</Table>

Simple Table

간단한 데이터를 표시하는 테이블입니다.

이름	이메일	역할
홍길동	hong@example.com	관리자
김철수	kim@example.com	편집자
이영희	lee@example.com	뷰어

tsx

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>이름</TableHead>
      <TableHead>이메일</TableHead>
      <TableHead>역할</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>홍길동</TableCell>
      <TableCell>hong@example.com</TableCell>
      <TableCell>관리자</TableCell>
    </TableRow>
    {/* ... */}
  </TableBody>
</Table>

Usage

tsx

import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
} from '@gpters-internal/ui';

function DataTable() {
  return (
    <Table>
      <TableCaption>데이터 목록</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>컬럼1</TableHead>
          <TableHead>컬럼2</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>데이터1</TableCell>
          <TableCell>데이터2</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}