表格

用于呈现数据的语义表格元素。

View source Report an issue View in Playground

全名	邮箱	组
Danilo Sousa	danilo@example.com	开发者
Zahra Ambessa	zahra@example.com	管理员
Jasper Eriksson	jasper@example.com	开发者

<Table.Root>
	<Table.Header>
		<Table.Row>
			<Table.ColumnHeaderCell>全名</Table.ColumnHeaderCell>
			<Table.ColumnHeaderCell>邮箱</Table.ColumnHeaderCell>
			<Table.ColumnHeaderCell>组</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>开发者</Table.Cell>
		</Table.Row>

		<Table.Row>
			<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
			<Table.Cell>zahra@example.com</Table.Cell>
			<Table.Cell>管理员</Table.Cell>
		</Table.Row>

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

API 参考

Root

将 Header 和 Body 部分分组。该组件基于 table 元素，并支持常见的边距属性。

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 元素，但使用 justify 而不是 align 来控制表格单元格内的水平空间分配。

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 部分相同的属性接口。

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 部分相同的属性接口。

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

示例

尺寸

使用 size 属性控制表格单元格中文本和内边距的大小。

全名	邮箱
Danilo Sousa	danilo@example.com
Zahra Ambessa	zahra@example.com

全名	邮箱
Danilo Sousa	danilo@example.com
Zahra Ambessa	zahra@example.com

全名	邮箱
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>全名</Table.ColumnHeaderCell>
				<Table.ColumnHeaderCell>邮箱</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>全名</Table.ColumnHeaderCell>
				<Table.ColumnHeaderCell>邮箱</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>全名</Table.ColumnHeaderCell>
				<Table.ColumnHeaderCell>邮箱</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>

带有背板

使用 variant="surface" 为表格添加一个视觉上封闭的背板。

全名	邮箱	组
Danilo Sousa	danilo@example.com	开发者
Zahra Ambessa	zahra@example.com	管理员
Jasper Eriksson	jasper@example.com	开发者

<Table.Root variant="surface">
	<Table.Header>
		<Table.Row>
			<Table.ColumnHeaderCell>全名</Table.ColumnHeaderCell>
			<Table.ColumnHeaderCell>邮箱</Table.ColumnHeaderCell>
			<Table.ColumnHeaderCell>组</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>开发者</Table.Cell>
		</Table.Row>

		<Table.Row>
			<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
			<Table.Cell>zahra@example.com</Table.Cell>
			<Table.Cell>管理员</Table.Cell>
		</Table.Row>

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

上一篇开关 Switch

下一篇标签 Tabs

在 GitHub 上编辑此页面

概览 Overview

主题 Theme

布局 Layout

排版

组件

通用工具 Utilities

表格