文档演练博客

表格

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

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 参考

¥API Reference

根

¥Root

Header 和 Body 部分分组。此组件基于 table 元素并支持常用边距属性。

¥Groups the Header and Body parts. This component is based on the table element and supports common margin props.

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

标题

¥Header

包含基于 thead 元素的表格列标题。

¥Contains the column headings for the table, based on the thead element.

正文

¥Body

显示表格数据。此组件基于 tbody 元素。

¥Displays the table data. This component is based on the tbody element.

行

¥Row

一行表格单元格。基于 tr 元素。

¥A row of table cells. Based on the tr element.

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

单元格

¥Cell

一个基本表格单元格。此组件基于 td 元素，但使用 justify 而不是 align 来控制表格单元格内水平空间的分布方式。

¥A basic table cell. This component is based on the td element, but uses justify instead of align to control how horizontal space is distributed within the table 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

ColumnHeaderCell

表格列的标题。基于 th 元素，并提供与 Cell 部分相同的 props 接口。

¥The header of a table column. Based on the th element and provides the same props interface as the Cell part.

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 接口。

¥The header of a table row. Based on the th element and provides the same props interface as the Cell part.

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 属性控制表格单元格的文本和内边距的大小。

¥Use the size prop to control how large the text and padding of the table cells should be.

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" 为表格添加视觉上封闭的背板。

¥Use variant="surface" to add a visually enclosed backplate to the table.

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>

Previous切换

Next标签

概览

主题

布局

排版

组件

实用工具

表格