Table - Kitchen Sink

기본 테이블

기본 Table 컴포넌트 사용 예시

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00

Footer 포함 테이블

TableFooter 컴포넌트를 사용한 합계 표시

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
Total			$750.00

Rowspan 예시

TableCell의 rowspan prop 사용 예시

Shipping cost table
Country	Courier	Price	Shipping Fee
United States	UPS	US$60	Free
Philippines	EFS	US$50	Free
Philippines	DHL	US$50	Free

컬럼 너비 지정

각 TableHead에 width 클래스를 직접 지정 (shadcn/ui 방식)

Column width example
Product	Category	Price	Description
Wireless Mouse	Electronics	$29.99	Ergonomic wireless mouse
Mechanical Keyboard	Electronics	$129.99	RGB mechanical keyboard

텍스트 정렬

각 셀에 text-left, text-center, text-right 클래스 적용

Text alignment example
Left	Center	Right
Left aligned	Center aligned	Right aligned
Text	Text	Text

컴포넌트 사용법

Table 컴포넌트 import 및 사용 예시

          import Table from '@shared/ui/table/Table.astro'
import TableCaption from '@shared/ui/table/TableCaption.astro'
import TableHeader from '@shared/ui/table/TableHeader.astro'
import TableBody from '@shared/ui/table/TableBody.astro'
import TableFooter from '@shared/ui/table/TableFooter.astro'
import TableRow from '@shared/ui/table/TableRow.astro'
import TableHead from '@shared/ui/table/TableHead.astro'
import TableCell from '@shared/ui/table/TableCell.astro'

<Table>
  <TableCaption>A list of invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead scope="col">Invoice</TableHead>
      <TableHead scope="col">Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>INV001</TableCell>
      <TableCell>Paid</TableCell>
    </TableRow>
  </TableBody>
</Table>
        

Props 설명

Component	Props	Description
`Table`	`class`	추가 CSS 클래스
`TableCaption`	`class`	캡션 스타일 (예: `sr-only`)
`TableHead`	`scope`, `class`	`scope`: 'col' \| 'row' \| 'colgroup' \| 'rowgroup'
`TableCell`	`rowspan`, `colspan`, `class`	셀 병합 및 스타일 지정

기본 스타일

각 컴포넌트에 적용된 기본 스타일

          Table: w-full border-collapse border-spacing-0 caption-bottom text-sm
TableHead: py-8 px-4 border border-solid border-gray-300 bg-gray-100 text-body-12-regular text-secondary-disabled-01
TableCell: py-8 px-4 border border-solid border-gray-300 text-body-12-regular text-secondary-disabled-01 text-center
TableRow: border-b transition-colors hover:bg-muted/50 [&:first-child>td]:border-t-0
        