Table

Table (테이블)

데이터를 표 형태로 표시하는 컴포넌트예요. 행과 열로 이루어진 정형 데이터를 보여줄 때 유용해요.

출처: 문서

본문

Table은 데이터를 표 형식으로 표시하는 컴포넌트예요. <ExampleTabs name="table-basic" />

사용법 (Usage)

import { Table } from "@chakra-ui/react"

<Table.Root>
  <Table.Caption />
  <Table.Header>
    <Table.Row>
      <Table.ColumnHeader />
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell />
    </Table.Row>
  </Table.Body>
  <Table.Footer>
    <Table.Row>
      <Table.Cell />
    </Table.Row>
  </Table.Footer>
</Table.Root>

예시 (Examples)

크기 (Sizes)

size prop으로 테이블의 크기를 바꿀 수 있어요.

변형 (Variants)

variant prop으로 테이블의 외형을 바꿀 수 있어요.

줄무늬 (Striped)

striped prop으로 테이블에 얼룩말 줄무늬(zebra-stripes)를 추가할 수 있어요.

캡션 (Caption)

Table.Caption 컴포넌트로 테이블에 캡션을 추가할 수 있어요.

캡션 위 (Caption Top)

Table.Caption의 side prop으로 캡션을 테이블 위쪽에 배치할 수 있어요.

열 경계선 (Column Border)

showColumnBorder prop으로 열 사이에 경계선을 추가할 수 있어요.

오버플로 (Overflow)

Table.ScrollArea 컴포넌트를 렌더링하면 가로 스크롤을 활성화할 수 있어요.

고정 헤더 (Sticky Header)

stickyHeader prop으로 테이블 헤더를 고정(sticky)시킬 수 있어요.

고정 열 (Sticky Column)

가로 스크롤 중에 테이블 열을 고정하기 위해 data-sticky 속성을 사용하는 예시예요.

고정 헤더와 열 (Sticky Header and Column)

stickyHeader와 data-sticky 속성을 함께 조합하면 헤더와 열 둘 다 고정된 테이블을 만들 수 있어요. 두 기능을 함께 쓸 때는 고정 열 헤더가 보이도록 헤더 행에 더 높은 z-index를 설정해야 해요.

호버 강조 (Highlight on Hover)

interactive prop으로 호버 시 행을 강조할 수 있어요.

페이지네이션 (Pagination)

테이블과 페이지네이션을 조합하는 예시예요.

선택 (Selection)

체크박스로 행 선택 기능을 테이블에 추가하는 예시예요.

액션 바 (Action Bar)

액션 바와 체크박스로 테이블을 구성하는 예시예요. 선택된 테이블 행에 대한 액션을 보여줄 때 유용해요.

열 그룹 (Column Group)

Table.ColumnGroup 컴포넌트로 HTML colgroup 요소를 사용해 열 너비를 분배할 수 있어요.

Warning: 이 컴포넌트에서 동작하는 유일한 prop은 htmlWidth예요.

네이티브 모드 (Native Mode)

native prop으로 Chakra의 스타일드 컴포넌트 대신 네이티브 HTML 요소(<thead>, <tbody>, <tr>, <td>, <th>)로 테이블 하위 요소를 렌더링할 수 있어요.

이 방식은 런타임 스타일링과 React Context 오버헤드를 없애 대형 테이블의 성능을 크게 개선하는 좋은 방법이에요.

TanStack Table

Chakra UI는 고급 테이블 기능을 위해 TanStack Table과 매끄럽게 연동돼요.

Props

Table 컴포넌트의 Root 파트 props에 대한 상세 정보는 공식 문서의 PropTable를 참고하세요.