Table

Table

데이터를 표시하기 위한 시맨틱한 테이블 요소예요.

출처: 문서

본문

행과 열로 구성된 데이터를 표 형태로 보여 줄 때 사용하는 컴포넌트예요.

<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>

      <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>

      <Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
    </Table.Row>
  </Table.Header>

  <Table.Body>
    <Table.Row>
      <Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>

      <Table.Cell>[email protected]</Table.Cell>

      <Table.Cell>Developer</Table.Cell>
    </Table.Row>

    <Table.Row>
      <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>

      <Table.Cell>[email protected]</Table.Cell>

      <Table.Cell>Admin</Table.Cell>
    </Table.Row>

    <Table.Row>
      <Table.RowHeaderCell>Jasper Eriksson</Table.RowHeaderCell>

      <Table.Cell>[email protected]</Table.Cell>

      <Table.Cell>Developer</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

API Reference

Root

Header와 Body 부분을 묶어요. 이 컴포넌트는 table 요소를 기반으로 하며, 공통 margin props를 지원해요.

Prop Type Default
size Responsive<"1" | "2" | "3"> "2"
variant "surface" | "ghost" "ghost"
layout Responsive<"auto" | "fixed"> No default value

테이블의 열 제목을 담는 부분으로, thead 요소를 기반으로 해요.

Body

테이블 데이터를 표시해요. 이 컴포넌트는 tbody 요소를 기반으로 해요.

Row

테이블 셀들의 행이에요. tr 요소를 기반으로 해요.

Prop Type Default
align Responsive<"start" | "center" | "end" | "baseline"> No default value

Cell

기본 테이블 셀이에요. td 요소를 기반으로 하지만, 셀 안의 가로 공간 분배를 제어할 때 align 대신 justify를 사용해요.

Prop Type Default
justify Responsive<"start" | "center" | "end"> No default value
width Responsive<string> No default value
minWidth Responsive<string> No default value
maxWidth Responsive<string> No default value
p Responsive<enum | string> No default value
px Responsive<enum | string> No default value
py Responsive<enum | string> No default value
pt Responsive<enum | string> No default value
pr Responsive<enum | string> No default value
pb Responsive<enum | string> No default value
pl Responsive<enum | string> No default value

ColumnHeaderCell

테이블 열의 헤더예요. th 요소를 기반으로 하며 Cell 부분과 동일한 props 인터페이스를 제공해요.

Prop Type Default
justify Responsive<"start" | "center" | "end"> No default value
width Responsive<string> No default value
minWidth Responsive<string> No default value
maxWidth Responsive<string> No default value
p Responsive<enum | string> No default value
px Responsive<enum | string> No default value
py Responsive<enum | string> No default value
pt Responsive<enum | string> No default value
pr Responsive<enum | string> No default value
pb Responsive<enum | string> No default value
pl Responsive<enum | string> No default value

RowHeaderCell

테이블 행의 헤더예요. th 요소를 기반으로 하며 Cell 부분과 동일한 props 인터페이스를 제공해요.

Prop Type Default
justify Responsive<"start" | "center" | "end"> No default value
width Responsive<string> No default value
minWidth Responsive<string> No default value
maxWidth Responsive<string> No default value
p Responsive<enum | string> No default value
px Responsive<enum | string> No default value
py Responsive<enum | string> No default value
pt Responsive<enum | string> No default value
pr Responsive<enum | string> No default value
pb Responsive<enum | string> No default value
pl Responsive<enum | string> No default value

예시 (Examples)

Size

size prop으로 테이블 셀의 텍스트 크기와 패딩 크기를 제어할 수 있어요.

<Flex direction="column" gap="5" maxWidth="350px">
  <Table.Root size="1">
    <Table.Header>
      <Table.Row>
        <Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>

        <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>

        <Table.Cell>[email protected]</Table.Cell>
      </Table.Row>

      <Table.Row>
        <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>

        <Table.Cell>[email protected]</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table.Root>

  <Table.Root size="2">
    <Table.Header>
      <Table.Row>
        <Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>

        <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>

        <Table.Cell>[email protected]</Table.Cell>
      </Table.Row>

      <Table.Row>
        <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>

        <Table.Cell>[email protected]</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table.Root>

  <Table.Root size="3">
    <Table.Header>
      <Table.Row>
        <Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>

        <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>

        <Table.Cell>[email protected]</Table.Cell>
      </Table.Row>

      <Table.Row>
        <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>

        <Table.Cell>[email protected]</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table.Root>
</Flex>

With a backplate

variant="surface"를 사용하면 테이블 주변에 시각적으로 감싸는 배경판(backplate)을 추가할 수 있어요.

<Table.Root variant="surface">
  <Table.Header>
    <Table.Row>
      <Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>

      <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>

      <Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
    </Table.Row>
  </Table.Header>

  <Table.Body>
    <Table.Row>
      <Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>

      <Table.Cell>[email protected]</Table.Cell>

      <Table.Cell>Developer</Table.Cell>
    </Table.Row>

    <Table.Row>
      <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>

      <Table.Cell>[email protected]</Table.Cell>

      <Table.Cell>Admin</Table.Cell>
    </Table.Row>

    <Table.Row>
      <Table.RowHeaderCell>Jasper Eriksson</Table.RowHeaderCell>

      <Table.Cell>[email protected]</Table.Cell>

      <Table.Cell>Developer</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

더 알아보기 (Learn more)

  • 셀 안의 정렬은 align이 아니라 justify prop을 사용해요. variant="surface"로 배경판을 더할 수 있어요.