Table

데이터를 표 형태로 표시하는 테이블 컴포넌트입니다.

개요

Table은 구조화된 데이터를 표 형태로 표시하는 컴포넌트입니다.

설치


npx @vortex/cli add table --package foundation

기본 사용법


import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@vortex/ui-foundation";
 
export default function Example() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>이름</TableHead>
          <TableHead>이메일</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>홍길동</TableCell>
          <TableCell>hong@example.com</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

Props API

Prop	Type	Default	Description
className	string	-	추가 CSS 클래스

예제


export default function UserTable() {
  const users = [
    { id: 1, name: "홍길동", email: "hong@example.com" },
    { id: 2, name: "김철수", email: "kim@example.com" },
  ];
 
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>ID</TableHead>
          <TableHead>이름</TableHead>
          <TableHead>이메일</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {users.map((user) => (
          <TableRow key={user.id}>
            <TableCell>{user.id}</TableCell>
            <TableCell>{user.name}</TableCell>
            <TableCell>{user.email}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}