ant-design/docs/pattern/complex-table.md

---
order: 5
title:
  zh-CN: 表格：复杂数据
  en-US: Complex Table
---

表格也用于展示复杂和高度结构化数据。

---

## 案例

### 多列数据

<img class="preview-img" align="right" alt="多列数据示例" src="https://os.alipayobjects.com/rmsportal/QZGYpJVtsTwFPmj.png">

通过按钮，可实现更多列数据的加载以及左右切换。

<br>

<img class="preview-img" align="right" alt="自定义列示例" src="https://os.alipayobjects.com/rmsportal/zWUjQRpJZhYsZbY.png">

提供用户自定义列的功能，方便用户查看需要的列。

<br>

<img class="preview-img" align="right" alt="横向滚动示例" src="https://os.alipayobjects.com/rmsportal/UOTwZLweENvwlnL.png">

固定表头列，通过横向滚动条来查看剩余内容。

### 带图标的表格

<img class="preview-img" align="right" alt="带图标表格示例" src="https://os.alipayobjects.com/rmsportal/OWEXWoGlsqyhVBB.png">

通过图标强化信息的传递，适用在表达数据变化趋势。

### 带图表的表格

<img class="preview-img" align="right" alt="带图表表格示例" src="https://os.alipayobjects.com/rmsportal/znVwTXxQpXuVqPl.png">

通过图表来强化信息的传递，适用在表达数据变化趋势。

### 二维表格

<img class="preview-img" align="right" alt="二维表格示例" src="https://os.alipayobjects.com/rmsportal/RQvqwEkXpHaFago.png">

横向和纵向各一个标题来展现数据。

### 小表格

<img class="preview-img" align="right" alt="小表格示例" src="https://os.alipayobjects.com/rmsportal/dMxxUThciHFQyXS.png">

适用在卡片、弹出框等空间较小的场景中。