Table 表格 #

以表格的方式展示数据。

获取组件 #

• <Table> 表格组件
• <Table.Column> 表格定义列组件
• <Table.ColumnGroup> 用于列头分组
• <Table.HeaderCell> 列头单元格组件
• <Table.Cell> 单元格组件

演示 #

基础表格 #

外观 #

加载状态 #

表格高度 #

和容器高度一致 #

强制表格的高度等于其父容器的高度。 不能与 autoHeight 一起使用。

自定义单元格 #

根据不同的业务场景，单元格中可以自己定义显示的内容，比如显示一张图片，比如您要添加一个几个按钮，或者显示一个文本框，都是可以自定义的，只需要把 Cell 组件重新自定义一下就行。

比如，显示一个图片，定义一个 ImageCell 组件：

const ImageCell = ({ rowData, dataKey, ...props }) => (
  <Cell {...props}>
    <img src={rowData[dataKey]} width="50" />
  </Cell>
);

<Column width="{200}">
  <HeaderCell>Avartar</HeaderCell>
  <ImageCell dataKey="avartar" />
</Column>

<Cell> 的 children 支持函数，可以获取到 rowData 返回一个新的 children

示例：

<Column width="{200}">
  <HeaderCell>Date</HeaderCell>
  <Cell>{rowData => rowData.date.toLocaleString()}</Cell>
</Column>

自定义行高

如果在实际应用中需要根据数据内容来定义行高，可以使用以下方式

return (
  <Table
    rowHeight={rowData => {
      if (rowData?.tags.length > 4) {
        return 80;
      }
      return 40;
    }}
  >
    ...
  </Table>
);

可调整列宽 #

把鼠标移动到列分割线的时候，会显示出一个蓝色的移动手柄，点击不松开并左右拖动就可以调整列的宽度。

要支持该功能，需要在 Column 设置一个 resizable 属性。

流体列宽 #

如果需要把某列设置为自动宽度，需要配置 flexGrow 属性。 flexGrow 是 number 类型。会按照所有 flexGrow 总和比例撑满 <Table> 剩下的宽度。

注意: 设置 flexGrow 以后，就不能设置 width 和 resizable 属性。 可以通过 minWidth 设置一个最小宽度

<Column flexGrow="{1}">
  <HeaderCell>City <code>flexGrow={1}</code></HeaderCell>
  <Cell dataKey="city" />
</Column>

<Column flexGrow="{2}">
  <HeaderCell>Company Name <code>flexGrow={2}</code></HeaderCell>
  <Cell dataKey="companyName" />
</Column>

...

完整的文本 #

在单元格内鼠标悬停时候把被切割的文本完整显示出来。

自动换行 #

⚠️ 我们不推荐和 wordWrap 和 virtualized 一起使用，因为 virtualized 只有在固定行高的情况下才能到达最好的性能。你可以使用 fullText 属性来解决文本无法展示完整的问题。

排序 #

在需要排序的列 <Column> 设置一个 sortable 属性。同时在 <Table> 定义一个 onSortColumn 回调函数，点击列头排序图标的时候，会触发该方法，并返回 sortColumn 和 sortType。

<Table onSortColumn={(sortColumn, sortType) => { console.log(sortColumn, sortType); }} >

<Column width="{50}" sortable>
  <HeaderCell>Id</HeaderCell>
  <Cell dataKey="id" />
</Column>

<Column width="{130}" sortable>
  <HeaderCell>First Name</HeaderCell>
  <Cell dataKey="firstName" />
</Column>

...

分页 #

表格默认是不具备对数据分页处理的功能，如果需要分页，首先需要对数据分页过滤(一般都是由服务端数据接口支持)，然后通过与 Pagination 组件组合以实现表格分页功能。

可展开 #

要实现一个可以展开的 Table ,需要以下几个属性的组合完成。

第一步：给 Table 设置属性

• renderRowExpanded(rowData) => ReactNode 用来返回需要在展开面板中渲染的内容
• rowExpandedHeight 设置可展开区域的高度， 默认是 100
• expandedRowKeys（受控） 和 defaultExpandedRowKeys 用来配置需要展开的行。需要注意的是这两个属性接收的参数是一个的数组，数组中是 rowKey。
• rowKey 给每一行数据对一个唯一 key , 对应 data 中的一个唯一值的 key。

第二步：自定义 Cell

自定义一个 Cell， 在内部放一个可以操作按钮，用于操作 expandedRowKeys 中的值。

合并列 #

在某些情况下，需要合并列来组织数据之间的关系，可以在 <Column> 组件上设置一个 colSpan 属性，同时通过 <ColumnGroup> 设置表头分组。 例如：

<ColumnGroup header="Name">
  <Column width={130} colSpan={2}>
    <HeaderCell>First Name</HeaderCell>
    <Cell dataKey="firstName" />
  </Column>

  <Column width={130}>
    <HeaderCell>Last Name</HeaderCell>
    <Cell dataKey="lastName" />
  </Column>
</ColumnGroup>

当 lastName 对应列的值为 null 或者 undefined 的时候，则会被 firstName 列合并。

合并行 #

汇总 #

更多示例 #

• Table Virtualized
• Tree Table
• Table Affix
• Table Editable

无障碍设计 #

• <Table> 拥有 grid role。当设置了 isTree, 则设置为 treegrid role。
• <HeanderCell> 有一个 columnheader role。
• <Cell> 有一个 gridcell role。
• <Table> 内的每一行，都有一个 row role。
• 使用 aria-rowcount 属性标识可用的总行数，并且用 aria-rowindex 属性用于标识行的索引。
• 使用 aria-colcount 属性标识可用的列总数，并且用 aria-colindex 属性用于标识列的索引。
• 对列进行排序时，可以将 aria-sort 属性应用于列标题以指示排序方法。

Props #

<Table> #

Table ref #

<Table.Column> #

sortable 是用来定义该列是否可排序，但是根据什么 key 排序需要 在 Cell 设置一个 dataKey 这里的排序是服务端排序，所以需要在 <Table> 的 onSortColumn 回调函数中处理逻辑，回调函数会返回 sortColumn, sortType 这两个值。

<Table.ColumnGroup> #

<Table.HeaderCell> #

<Table.Cell> #