CoreTable

개요

CoreTable은 HTML 테이블 구조를 그대로 따르는 compound 컴포넌트입니다. 각 서브 컴포넌트는 네이티브 HTML 요소에 디자인 토큰 기반 스타일을 입힌 thin wrapper입니다.

CoreTable.Container — 테이블을 감싸는 외부 컨테이너 (<div>)
CoreTable.Table — 실제 <table> 요소. size prop으로 밀도 제어
CoreTable.TableHead / TableBody — <thead> / <tbody>
CoreTable.TableRow — <tr>. data-state="selected" / aria-disabled="true" 속성으로 상태 표현
CoreTable.TableHeader — <th>, CoreTable.TableCell — <td>

Usage

기본 사용법

import { CoreTable } from '@featuring-corp/components';

<CoreTable.Container>
  <CoreTable.Table size="md">
    <CoreTable.TableHead>
      <CoreTable.TableRow>
        <CoreTable.TableHeader>INVOICE</CoreTable.TableHeader>
        <CoreTable.TableHeader>STATUS</CoreTable.TableHeader>
        <CoreTable.TableHeader>AMOUNT</CoreTable.TableHeader>
      </CoreTable.TableRow>
    </CoreTable.TableHead>
    <CoreTable.TableBody>
      <CoreTable.TableRow>
        <CoreTable.TableCell>INV001</CoreTable.TableCell>
        <CoreTable.TableCell>Paid</CoreTable.TableCell>
        <CoreTable.TableCell>$250.00</CoreTable.TableCell>
      </CoreTable.TableRow>
      <CoreTable.TableRow>
        <CoreTable.TableCell>INV002</CoreTable.TableCell>
        <CoreTable.TableCell>Pending</CoreTable.TableCell>
        <CoreTable.TableCell>$150.00</CoreTable.TableCell>
      </CoreTable.TableRow>
    </CoreTable.TableBody>
  </CoreTable.Table>
</CoreTable.Container>

크기 설정

size prop으로 행 높이와 padding을 조절합니다.

// sm — 밀집 레이아웃
<CoreTable.Table size="sm">...</CoreTable.Table>

// md — 기본값
<CoreTable.Table size="md">...</CoreTable.Table>

// lg — 여유 있는 레이아웃
<CoreTable.Table size="lg">...</CoreTable.Table>

선택된 행 (Selected Row)

TableRow에 data-state="selected"를 추가하면 primary 배경이 적용됩니다.

<CoreTable.TableRow data-state="selected">
  <CoreTable.TableCell>선택된 행</CoreTable.TableCell>
</CoreTable.TableRow>

비활성화된 행 (Disabled Row)

aria-disabled="true"를 사용해 시각적으로 비활성화를 표현합니다. 포커스는 여전히 가능합니다.

<CoreTable.TableRow aria-disabled="true">
  <CoreTable.TableCell>비활성화 행</CoreTable.TableCell>
</CoreTable.TableRow>

Container와 추가 콘텐츠 조합

Container는 단순 flex 래퍼이므로 헤더, 페이지네이션 등을 자유롭게 함께 배치할 수 있습니다.

import { CoreTable, CorePagination } from '@featuring-corp/components';

<CoreTable.Container>
  <div>총 56명</div>
  <CoreTable.Table size="md">
    {/* ... */}
  </CoreTable.Table>
  <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
    <CorePagination totalPage={5} activePage={1} onPageChange={() => {}} />
  </div>
</CoreTable.Container>

Container 너비 지정

<CoreTable.Container style={{ width: '600px' }}>
  <CoreTable.Table size="md">
    {/* ... */}
  </CoreTable.Table>
</CoreTable.Container>

Props

CoreTable.Table

Prop

Type

CoreTable.Container

HTMLAttributes<HTMLDivElement> 타입을 확장한 컴포넌트입니다.

CoreTable.TableHead / TableBody

HTMLAttributes<HTMLTableSectionElement> 타입을 확장한 컴포넌트입니다.

CoreTable.TableRow

HTMLAttributes<HTMLTableRowElement> 타입을 확장한 컴포넌트입니다. 상태 표현은 data-state="selected" / aria-disabled="true" 속성을 사용합니다.

CoreTable.TableHeader

ThHTMLAttributes<HTMLTableCellElement> 타입을 확장한 컴포넌트입니다.

CoreTable.TableCell

TdHTMLAttributes<HTMLTableCellElement> 타입을 확장한 컴포넌트입니다.

스타일

Container

display: flex, flex-direction: column, align-items: stretch
gap: spacing-200 (8px)

Table Border (내부 래퍼)

border: 1px solid border.default
border-radius: radius-50
overflow: auto

Size Variants

Size	행 높이	Padding X	Header 타이포	Cell 타이포
`sm`	24px	`spacing-250` (10px)	`heading[1]`	`body[1]`
`md`	36px	`spacing-300` (12px)	`heading[2]`	`body[2]`
`lg`	48px	`spacing-400` (16px)	`heading[2]`	`body[2]`

행 상태별 토큰

상태	배경
TableHead Row	`background[2]`
TableBody Row (기본)	`background[1]`
hover	`background[3]`
`data-state="selected"`	`primary[10]`
`aria-disabled="true"`	`background[4]`
TableBody 마지막 Row	`border-bottom: none`

On this page