Table

npx axis-cli add table

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from '@axis-ds/ui-react'

export function Example() {
  return (
    <Table>
      <TableCaption>최근 주문 목록</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead className="w-[100px]">주문번호</TableHead>
          <TableHead>상품명</TableHead>
          <TableHead>상태</TableHead>
          <TableHead className="text-right">금액</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell className="font-medium">ORD001</TableCell>
          <TableCell>디자인 시스템 라이선스</TableCell>
          <TableCell>완료</TableCell>
          <TableCell className="text-right">₩250,000</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">ORD002</TableCell>
          <TableCell>컴포넌트 패키지</TableCell>
          <TableCell>처리중</TableCell>
          <TableCell className="text-right">₩150,000</TableCell>
        </TableRow>
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={3}>합계</TableCell>
          <TableCell className="text-right">₩400,000</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  )
}