Themes

Advanced

Utils

Table

데이터를 표시하기 위한 시멘틱 테이블 요소입니다.

View source Report an issue View in Playground

Full name	Email	Group
Danilo Sousa	danilo@example.com	Developer
Zahra Ambessa	zahra@example.com	Admin
Jasper Eriksson	jasper@example.com	Developer

<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>danilo@example.com</Table.Cell>
			<Table.Cell>Developer</Table.Cell>
		</Table.Row>

		<Table.Row>
			<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
			<Table.Cell>zahra@example.com</Table.Cell>
			<Table.Cell>Admin</Table.Cell>
		</Table.Row>

		<Table.Row>
			<Table.RowHeaderCell>Jasper Eriksson</Table.RowHeaderCell>
			<Table.Cell>jasper@example.com</Table.Cell>
			<Table.Cell>Developer</Table.Cell>
		</Table.Row>
	</Table.Body>
</Table.Root>

API Reference

Root

이 컴포넌트는 Table primitive에서 props를 상속받으며, common 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을 사용하여 테이블 셀의 텍스트와 Padding 크기를 조절합니다.

Full name	Email
Danilo Sousa	danilo@example.com
Zahra Ambessa	zahra@example.com

Full name	Email
Danilo Sousa	danilo@example.com
Zahra Ambessa	zahra@example.com

Full name	Email
Danilo Sousa	danilo@example.com
Zahra Ambessa	zahra@example.com

<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>danilo@example.com</Table.Cell>
			</Table.Row>
			<Table.Row>
				<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
				<Table.Cell>zahra@example.com</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>danilo@example.com</Table.Cell>
			</Table.Row>
			<Table.Row>
				<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
				<Table.Cell>zahra@example.com</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>danilo@example.com</Table.Cell>
			</Table.Row>
			<Table.Row>
				<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
				<Table.Cell>zahra@example.com</Table.Cell>
			</Table.Row>
		</Table.Body>
	</Table.Root>
</Flex>

With a backplate

variant="surface"를 사용하여 테이블에 시각적으로 감싸진 백플레이트를 추가합니다.

Full name	Email	Group
Danilo Sousa	danilo@example.com	Developer
Zahra Ambessa	zahra@example.com	Admin
Jasper Eriksson	jasper@example.com	Developer

<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>danilo@example.com</Table.Cell>
			<Table.Cell>Developer</Table.Cell>
		</Table.Row>

		<Table.Row>
			<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
			<Table.Cell>zahra@example.com</Table.Cell>
			<Table.Cell>Admin</Table.Cell>
		</Table.Row>

		<Table.Row>
			<Table.RowHeaderCell>Jasper Eriksson</Table.RowHeaderCell>
			<Table.Cell>jasper@example.com</Table.Cell>
			<Table.Cell>Developer</Table.Cell>
		</Table.Row>
	</Table.Body>
</Table.Root>

PreviousSwitch

NextTabs

Edit this page on GitHub.

Overview

Theme

Layout

Typography

Components

Utilities