表格

表格用于将数据组织为行和列。简单的表格可使用 Markdown 表格快速创建；如需高亮、对齐等更多选项，请使用 Table 组件。

用法

<Table>
  <Row header>
    <Cell>Name</Cell>
    <Cell>Type</Cell>
  </Row>
  <Row>
    <Cell>id</Cell>
    <Cell>string</Cell>
  </Row>
</Table>

Markdown 表格

这是创建表格最快的方式。使用竖线（|）分隔列，使用连字符（-）构成表头行：

| Name | Type | Description |
|------|------|-------------|
| id | string | Unique identifier |
| email | string | User email address |

Table 组件

如需更多控制，请使用 <Table>、<Row> 和 <Cell> 组件：

<Table>
  <Row header>
    <Cell>Name</Cell>
    <Cell>Type</Cell>
    <Cell>Description</Cell>
  </Row>
  <Row>
    <Cell>id</Cell>
    <Cell>string</Cell>
    <Cell>Unique identifier</Cell>
  </Row>
  <Row>
    <Cell>email</Cell>
    <Cell>string</Cell>
    <Cell>User email address</Cell>
  </Row>
</Table>

斑马纹行

添加交替的行背景色，提升可读性：

<Table striped>
  <Row header>
    <Cell>Parameter</Cell>
    <Cell>Value</Cell>
  </Row>
  <Row><Cell>timeout</Cell><Cell>30s</Cell></Row>
  <Row><Cell>retries</Cell><Cell>3</Cell></Row>
  <Row><Cell>backoff</Cell><Cell>exponential</Cell></Row>
  <Row><Cell>maxDelay</Cell><Cell>60s</Cell></Row>
</Table>

边框与紧凑布局

在单元格之间添加边框，并减少内边距：

<Table bordered compact>
  <Row header>
    <Cell>A</Cell>
    <Cell>B</Cell>
    <Cell>C</Cell>
  </Row>
  <Row>
    <Cell>1</Cell>
    <Cell>2</Cell>
    <Cell>3</Cell>
  </Row>
</Table>

高亮行

高亮整行以引起注意：

<Table>
  <Row header>
    <Cell>Field</Cell>
    <Cell>Required</Cell>
    <Cell>Description</Cell>
  </Row>
  <Row highlight highlightColor="warning">
    <Cell>api_key</Cell>
    <Cell>Yes</Cell>
    <Cell>Your API authentication key</Cell>
  </Row>
  <Row>
    <Cell>limit</Cell>
    <Cell>No</Cell>
    <Cell>Maximum results (default: 100)</Cell>
  </Row>
</Table>

可用的高亮颜色：primary、success、warning、error、info

高亮单元格

高亮单个单元格，用作状态指示：

<Table>
  <Row header>
    <Cell>Service</Cell>
    <Cell>Status</Cell>
  </Row>
  <Row>
    <Cell>API</Cell>
    <Cell highlight highlightColor="success">Operational</Cell>
  </Row>
  <Row>
    <Cell>Database</Cell>
    <Cell highlight highlightColor="warning">Degraded</Cell>
  </Row>
  <Row>
    <Cell>Storage</Cell>
    <Cell highlight highlightColor="error">Outage</Cell>
  </Row>
</Table>

单元格对齐

按单元格控制文本对齐方式：

<Table>
  <Row header>
    <Cell align="left">Left</Cell>
    <Cell align="center">Center</Cell>
    <Cell align="right">Right</Cell>
  </Row>
  <Row>
    <Cell align="left">Text</Cell>
    <Cell align="center">Text</Cell>
    <Cell align="right">$99.99</Cell>
  </Row>
</Table>

跨列与跨行

跨列或跨行合并单元格：

<Table bordered>
  <Row header>
    <Cell>Category</Cell>
    <Cell>Item</Cell>
    <Cell>Price</Cell>
  </Row>
  <Row>
    <Cell rowSpan={2}>Fruits</Cell>
    <Cell>Apple</Cell>
    <Cell>$1.00</Cell>
  </Row>
  <Row>
    <Cell>Banana</Cell>
    <Cell>$0.50</Cell>
  </Row>
  <Row>
    <Cell colSpan={2}>Subtotal</Cell>
    <Cell>$1.50</Cell>
  </Row>
</Table>

可见标题

在表格上方显示无障碍表格标题：

<Table caption="Monthly Revenue by Region" captionVisible>
  <Row header>
    <Cell>Region</Cell>
    <Cell align="right">Revenue</Cell>
  </Row>
  <Row>
    <Cell>North America</Cell>
    <Cell align="right">$1.2M</Cell>
  </Row>
</Table>

可排序列

使用 sortable 属性开启列排序。点击列标题即可排序：

<Table sortable>
  <Row header>
    <Cell>Name</Cell>
    <Cell>Price</Cell>
    <Cell>Stock</Cell>
  </Row>
  <Row><Cell>Widget A</Cell><Cell>$29.99</Cell><Cell>150</Cell></Row>
  <Row><Cell>Gadget B</Cell><Cell>$49.99</Cell><Cell>75</Cell></Row>
  <Row><Cell>Tool C</Cell><Cell>$19.99</Cell><Cell>200</Cell></Row>
  <Row><Cell>Device D</Cell><Cell>$99.99</Cell><Cell>25</Cell></Row>
</Table>

将 sortable 与 striped 等其他属性组合使用：

<Table sortable striped>
  <Row header>
    <Cell>Team</Cell>
    <Cell>Wins</Cell>
    <Cell>Losses</Cell>
  </Row>
  <Row><Cell>Eagles</Cell><Cell>12</Cell><Cell>4</Cell></Row>
  <Row><Cell>Bears</Cell><Cell>8</Cell><Cell>8</Cell></Row>
  <Row><Cell>Lions</Cell><Cell>10</Cell><Cell>6</Cell></Row>
</Table>

属性

Table

Row

Cell

下一步