表格 Table

表格组件用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作等复杂行为时。

基础示例

基本用法。

表格无数据

基本用法。

选择和操作

基本用法。

自定义选择项

通过 rowSelection.selections 自定义选择项，默认不显示下拉选项，设为 true 时显示默认选择项。

筛选和排序

对某一列数据进行筛选，使用列的 filters 属性来指定需要筛选菜单的列，onFilter 用于筛选当前数据，filterMultiple 用于指定多选和单选。

• 对某一列数据进行排序，通过指定列的 sorter 函数即可启动排序按钮sorter: function(rowA, rowB) { ... }， rowA、rowB 为比较的两个行数据。
• sortDirections: ['ascend' | 'descend']改变每列可用的排序方式，切换排序时按数组内容依次切换，设置在 table props 上时对所有列生效你可以通过设置 ['ascend', 'descend', 'ascend'] 禁止排序恢复到默认状态。
• 使用 defaultSortOrder 属性，设置列的默认排序顺序。

展开行

当表格内容较多不能一次性完全展示时。

表格行/列合并

表头只支持列合并，使用 column 里的 colSpan 进行设置表格支持行/列合并，使用render里的单元格属性colSpan或者rowSpan设值为0时，设置的表格不会渲染。

带边框

添加表格边框线，页头和页脚。

拖拽排序

使用自定义元素，我们可以集成 react-dnd 来实现拖拽排序。

拖拽手柄列

拖拽手柄列。

固定头和列

适合同时展示有大量数据和数据列。

固定列

对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 scroll.x 配合使用。

固定表头

方便一页内展示大量数据。

表头分组

使用 columns[n] 可以内嵌 children，以渲染分组表头。

可伸缩列

可伸缩列。

开启选择

第一列是联动的选择框可以通过 rowSelection.type 属性指定选择类型，默认为 checkbox。

紧凑型

两种紧凑型的列表，小型列表只用于对话框内。

随页面滚动的固定表头和滚动条

对于长表格，需要滚动才能查看表头和滚动条，那么现在可以设置跟随页面固定表头和滚动条。

单元格自动省略

设置 column.ellipsis 可以让单元格内容根据宽度自动省略。

树形数据展示

表格支持树形数据的展示，当数据中有 children 字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用 childrenColumnName 进行配置。
可以通过设置 indentSize 以控制每一层的缩进宽度。

Table

onRow 用法

适用于onRow、onHeaderRow、onCell、onHeaderCell。

<Table
  onRow={record => {
    return {
      onClick: event => {}, // 点击行
      onDoubleClick: event => {},
      onContextMenu: event => {},
      onMouseEnter: event => {}, // 鼠标移入行
      onMouseLeave: event => {},
    };
  }}
  onHeaderRow={(columns, index) => {
    return {
      onClick: () => {}, // 点击表头行
    };
  }}
/>

Column

列描述数据对象，是 Columns 中的一项，Column 使用相同的 API。

ColumnGroup

pagination

分页的配置项。

更多配置项，请查看

Pagination

expandable

展开功能的配置。

rowSelection

选择功能的配置。

scroll

selection

在 TypeScript 中使用

import { Table } from 'klein';
import { ColumnsType } from 'klein/es/table';

interface User {
  key: number;
  name: string;
}

const columns: ColumnsType<User> = [
  {
    key: 'name',
    title: 'Name',
    dataIndex: 'name',
  },
];

const data: User[] = [
  {
    key: 0,
    name: 'Jack',
  },
];

export default () => (
  <>
    <Table<User> columns={columns} dataSource={data} />
    /* 使用 JSX 风格的 API */
    <Table<User> dataSource={data}>
      <Table.Column<User> key="name" title="Name" dataIndex="name" />
    </Table>
  </>
);