表格

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

全名	邮箱	组
Danilo Sousa	[email protected]	开发者
Zahra Ambessa	[email protected]	管理员
Jasper Eriksson	[email protected]	开发者

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

根

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

属性	类型	默认值
`size`	`响应式<"1" \| "2" \| "3">`	`"2"`
`variant`	`"surface" \| "ghost"`	`"ghost"`
`layout`	`响应式<"auto" \| "fixed">`	无默认值

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

Body

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

Row

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

属性	类型	默认值
`align`	`响应式<"start" \| "center" \| "end" \| "baseline">`	无默认值

Cell

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

属性	类型	默认值
`justify`	`响应式<"start" \| "center" \| "end">`	无默认值
`width`	`响应式<字符串>`	无默认值
`minWidth`	`响应式<字符串>`	无默认值
`maxWidth`	`响应式<字符串>`	无默认值
`p`	`响应式<枚举 \| 字符串>`	无默认值
`px`	`响应式<枚举 \| 字符串>`	无默认值
`py`	`响应式<枚举 \| 字符串>`	无默认值
`pt`	`响应式<枚举 \| 字符串>`	无默认值
`pr`	`响应式<枚举 \| 字符串>`	无默认值
`pb`	`响应式<枚举 \| 字符串>`	无默认值
`pl`	`响应式<枚举 \| 字符串>`	无默认值

ColumnHeaderCell

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

属性	类型	默认值
`justify`	`响应式<"start" \| "center" \| "end">`	无默认值
`width`	`响应式<字符串>`	无默认值
`minWidth`	`响应式<字符串>`	无默认值
`maxWidth`	`响应式<字符串>`	无默认值
`p`	`响应式<枚举 \| 字符串>`	无默认值
`px`	`响应式<枚举 \| 字符串>`	无默认值
`py`	`响应式<枚举 \| 字符串>`	无默认值
`pt`	`响应式<枚举 \| 字符串>`	无默认值
`pr`	`响应式<枚举 \| 字符串>`	无默认值
`pb`	`响应式<枚举 \| 字符串>`	无默认值
`pl`	`响应式<枚举 \| 字符串>`	无默认值

RowHeaderCell

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

属性	类型	默认值
`justify`	`响应式<"start" \| "center" \| "end">`	无默认值
`width`	`响应式<字符串>`	无默认值
`minWidth`	`响应式<字符串>`	无默认值
`maxWidth`	`响应式<字符串>`	无默认值
`p`	`响应式<枚举 \| 字符串>`	无默认值
`px`	`响应式<枚举 \| 字符串>`	无默认值
`py`	`响应式<枚举 \| 字符串>`	无默认值
`pt`	`响应式<枚举 \| 字符串>`	无默认值
`pr`	`响应式<枚举 \| 字符串>`	无默认值
`pb`	`响应式<枚举 \| 字符串>`	无默认值
`pl`	`响应式<枚举 \| 字符串>`	无默认值

示例

尺寸

使用 size 属性来控制表格单元格的文本和填充的大小。

全名	邮箱
Danilo Sousa	[email protected]
Zahra Ambessa	[email protected]

全名	邮箱
Danilo Sousa	[email protected]
Zahra Ambessa	[email protected]

全名	邮箱
Danilo Sousa	[email protected]
Zahra Ambessa	[email protected]

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

带背景板

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

全名	邮箱	组
Danilo Sousa	[email protected]	开发者
Zahra Ambessa	[email protected]	管理员
Jasper Eriksson	[email protected]	开发者

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

上一个开关

下一个选项卡

在 GitHub 上编辑此页面。

概述

主题

布局

排版

组件

实用工具

表格