CoreTable

Usage

기본 사용법

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

<CoreTable.Container>
  <CoreTable.Table size="md">
    <CoreTable.TableHead>
      <CoreTable.TableRow>
        <CoreTable.TableHeader>INVOICE</CoreTable.TableHeader>
        <CoreTable.TableHeader>PAYMENT STATUS</CoreTable.TableHeader>
        <CoreTable.TableHeader>TOTAL AMOUNT</CoreTable.TableHeader>
        <CoreTable.TableHeader>PAYMENT METHOD</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.TableCell>Credit Card</CoreTable.TableCell>
      </CoreTable.TableRow>
      <CoreTable.TableRow>
        <CoreTable.TableCell>INV002</CoreTable.TableCell>
        <CoreTable.TableCell>Pending</CoreTable.TableCell>
        <CoreTable.TableCell>$150.00</CoreTable.TableCell>
        <CoreTable.TableCell>PayPal</CoreTable.TableCell>
      </CoreTable.TableRow>
    </CoreTable.TableBody>
  </CoreTable.Table>
</CoreTable.Container>

크기 설정

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

// Small
<CoreTable.Container>
  <CoreTable.Table size="sm">
    <CoreTable.TableHead>
      <CoreTable.TableRow>
        <CoreTable.TableHeader>Header 1</CoreTable.TableHeader>
        <CoreTable.TableHeader>Header 2</CoreTable.TableHeader>
      </CoreTable.TableRow>
    </CoreTable.TableHead>
    <CoreTable.TableBody>
      <CoreTable.TableRow>
        <CoreTable.TableCell>Cell 1</CoreTable.TableCell>
        <CoreTable.TableCell>Cell 2</CoreTable.TableCell>
      </CoreTable.TableRow>
    </CoreTable.TableBody>
  </CoreTable.Table>
</CoreTable.Container>

// Medium
<CoreTable.Container>
  <CoreTable.Table size="md">
    {/* ... */}
  </CoreTable.Table>
</CoreTable.Container>

// Large
<CoreTable.Container>
  <CoreTable.Table size="lg">
    {/* ... */}
  </CoreTable.Table>
</CoreTable.Container>

선택된 행 (Selected Row)

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

<CoreTable.Container>
  <CoreTable.Table size="md">
    <CoreTable.TableHead>
      <CoreTable.TableRow>
        <CoreTable.TableHeader>Header 1</CoreTable.TableHeader>
        <CoreTable.TableHeader>Header 2</CoreTable.TableHeader>
        <CoreTable.TableHeader>Header 3</CoreTable.TableHeader>
      </CoreTable.TableRow>
    </CoreTable.TableHead>
    <CoreTable.TableBody>
      <CoreTable.TableRow>
        <CoreTable.TableCell>Default Cell 1</CoreTable.TableCell>
        <CoreTable.TableCell>Default Cell 2</CoreTable.TableCell>
        <CoreTable.TableCell>Default Cell 3</CoreTable.TableCell>
      </CoreTable.TableRow>
      <CoreTable.TableRow data-state="selected">
        <CoreTable.TableCell>Selected Cell 1</CoreTable.TableCell>
        <CoreTable.TableCell>Selected Cell 2</CoreTable.TableCell>
        <CoreTable.TableCell>Selected Cell 3</CoreTable.TableCell>
      </CoreTable.TableRow>
      <CoreTable.TableRow>
        <CoreTable.TableCell>Default Cell 1</CoreTable.TableCell>
        <CoreTable.TableCell>Default Cell 2</CoreTable.TableCell>
        <CoreTable.TableCell>Default Cell 3</CoreTable.TableCell>
      </CoreTable.TableRow>
    </CoreTable.TableBody>
  </CoreTable.Table>
</CoreTable.Container>

비활성화된 행 (Disabled Row)

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

<CoreTable.Container>
  <CoreTable.Table size="md">
    <CoreTable.TableHead>
      <CoreTable.TableRow>
        <CoreTable.TableHeader>Header 1</CoreTable.TableHeader>
        <CoreTable.TableHeader>Header 2</CoreTable.TableHeader>
        <CoreTable.TableHeader>Header 3</CoreTable.TableHeader>
      </CoreTable.TableRow>
    </CoreTable.TableHead>
    <CoreTable.TableBody>
      <CoreTable.TableRow>
        <CoreTable.TableCell>Default Cell 1</CoreTable.TableCell>
        <CoreTable.TableCell>Default Cell 2</CoreTable.TableCell>
        <CoreTable.TableCell>Default Cell 3</CoreTable.TableCell>
      </CoreTable.TableRow>
      <CoreTable.TableRow aria-disabled="true">
        <CoreTable.TableCell>Disabled Cell 1</CoreTable.TableCell>
        <CoreTable.TableCell>Disabled Cell 2</CoreTable.TableCell>
        <CoreTable.TableCell>Disabled Cell 3</CoreTable.TableCell>
      </CoreTable.TableRow>
    </CoreTable.TableBody>
  </CoreTable.Table>
</CoreTable.Container>

Container와 함께 사용 (추가 콘텐츠 포함)

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

<CoreTable.Container>
  <div>
    <p>총 56명</p>
  </div>
  <CoreTable.Table size="md">
    <CoreTable.TableHead>
      <CoreTable.TableRow>
        <CoreTable.TableHeader>Header Cell 1</CoreTable.TableHeader>
        <CoreTable.TableHeader>Header Cell 2</CoreTable.TableHeader>
        <CoreTable.TableHeader>Header Cell 3</CoreTable.TableHeader>
      </CoreTable.TableRow>
    </CoreTable.TableHead>
    <CoreTable.TableBody>
      <CoreTable.TableRow>
        <CoreTable.TableCell>Default Cell 1</CoreTable.TableCell>
        <CoreTable.TableCell>Default Cell 2</CoreTable.TableCell>
        <CoreTable.TableCell>Default Cell 3</CoreTable.TableCell>
      </CoreTable.TableRow>
    </CoreTable.TableBody>
  </CoreTable.Table>
  <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
    <CorePagination totalPage={3} activePage={1} onPageChange={() => {}} />
  </div>
</CoreTable.Container>

Container 스타일 설정

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

<CoreTable.Container style={{ width: '600px' }}>
  <CoreTable.Table size="md">
    <CoreTable.TableHead>
      <CoreTable.TableRow>
        <CoreTable.TableHeader>Header 1</CoreTable.TableHeader>
        <CoreTable.TableHeader>Header 2</CoreTable.TableHeader>
      </CoreTable.TableRow>
    </CoreTable.TableHead>
    <CoreTable.TableBody>
      <CoreTable.TableRow>
        <CoreTable.TableCell>Cell 1</CoreTable.TableCell>
        <CoreTable.TableCell>Cell 2</CoreTable.TableCell>
      </CoreTable.TableRow>
    </CoreTable.TableBody>
  </CoreTable.Table>
</CoreTable.Container>

Props

CoreTable.Table

Prop

Type

CoreTable.Container

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

CoreTable.TableHead

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

CoreTable.TableBody

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

CoreTable.TableRow

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

CoreTable.TableHeader

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

CoreTable.TableCell

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

CoreTableSize

Prop

Type

스타일

기본 스타일 속성

Container:

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

Table Border:

border-width: 1px
border-style: solid
border-color: border.default
border-radius: radius-50
width: 100%
position: relative
overflow: auto

Table:

width: 100%

TableRow:

border-bottom-width: 1px
border-bottom-style: solid
border-bottom-color: border.default
TableBody Row: background-color: background[1]
TableHead Row: background-color: background[2]
Hover: background-color: background[3]
Selected (data-state="selected"): background-color: primary[10]
Disabled (aria-disabled="true"): background-color: background[4]

Size Variants

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

States (상태별 토큰)

TableRow:

TableBody Row: background-color: background[1]
TableHead Row: background-color: background[2]
Hover: background-color: background[3]
Selected (data-state="selected"): background-color: primary[10]
Disabled (aria-disabled="true"): background-color: background[4]
Last Row (TableBody): border-bottom: none

On this page