---
title: Table 表格
order: 8
group:
  path: /components
nav:
  title: 组件
  path: /components
---

## 使用

当有大量结构化的数据需要展现时。

当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

### 基本使用

```jsx
import React from 'react';
import { Table, Tag } from 'quanta-design';

const columns = [
  { title: '链ID', dataIndex: 'chain_code' },
  { title: '链类型', dataIndex: 'chain_type' },
  { title: '版本', dataIndex: 'version' },
  { title: '链名', dataIndex: 'chain_name' },
  { title: '部署类型', dataIndex: 'deploy_type' },
  {
    title: '状态',
    dataIndex: 'status',
    render: text => {
      switch (text) {
        case 1:
          return <Tag color="default">操作始末</Tag>;
          break;
        case 2:
          return <Tag color="processing">进行中</Tag>;
          break;
        case 3:
          return <Tag color="success">完成</Tag>;
          break;
        case 4:
          return <Tag color="error">失败</Tag>;
          break;
      }
    },
  },
];

const dataSource = [
  {
    chain_code: 'bc012018101641984056',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '通用链',
    deploy_type: '集群部署',
    status: 1,
  },
  {
    chain_code: 'bc012018101641984021',
    chain_type: 'fabric',
    version: 'V0.9.7',
    chain_name: '联通链',
    deploy_type: '集群部署',
    status: 2,
  },
  {
    chain_code: 'bc012018101641983221',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '测试链',
    deploy_type: '集群部署',
    status: 3,
  },
  {
    chain_code: 'bc012018101641983222',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '测试链',
    deploy_type: '集群部署',
    status: 4,
  },
  {
    chain_code: 'bc012018101641983223',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '测试链',
    deploy_type: '集群部署',
    status: 1,
  },
  {
    chain_code: 'bc012018101641983224',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '测试链',
    deploy_type: '集群部署',
    status: 2,
  },
  {
    chain_code: 'bc012018101641983225',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '测试链',
    deploy_type: '集群部署',
    status: 3,
  },
  {
    chain_code: 'bc012018101641983226',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '测试链',
    deploy_type: '集群部署',
    status: 4,
  },
  {
    chain_code: 'bc012018101641983227',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '测试链',
    deploy_type: '集群部署',
    status: 1,
  },
  {
    chain_code: 'bc012018101641983228',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '测试链',
    deploy_type: '集群部署',
    status: 2,
  },
  {
    chain_code: 'bc012018101641983229',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '测试链',
    deploy_type: '集群部署',
    status: 3,
  },
  {
    chain_code: 'bc012018101641983230',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '测试链',
    deploy_type: '集群部署',
    status: 4,
  },
];

export default () => (
  <Table
    columns={columns}
    dataSource={dataSource}
    rowKey="chain_code"
    pagination={{
      total: 500,
      pageSize: 5,
    }}
  />
);
```

### 带边框

```jsx
import React from 'react';
import { Table } from 'quanta-design';

const columns = [
  { title: '链ID', dataIndex: 'chain_code' },
  { title: '链类型', dataIndex: 'chain_type' },
  { title: '版本', dataIndex: 'version' },
  { title: '链名', dataIndex: 'chain_name' },
  { title: '部署类型', dataIndex: 'deploy_type' },
  { title: '状态', dataIndex: 'status' },
];

const dataSource = [
  {
    chain_code: 'bc012018101641984056',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '通用链',
    deploy_type: '集群部署',
    status: '运行',
  },
  {
    chain_code: 'bc012018101641984021',
    chain_type: 'fabric',
    version: 'V0.9.7',
    chain_name: '联通链',
    deploy_type: '集群部署',
    status: '运行',
  },
  {
    chain_code: 'bc012018101641983221',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '测试链',
    deploy_type: '集群部署',
    status: '运行',
  },
];

const rowSelection = {};

export default () => (
  <Table
    columns={columns}
    dataSource={dataSource}
    rowKey="chain_code"
    bordered
    pagination={false}
    rowSelection={rowSelection}
  />
);
```

### 分页器

```jsx
import React from 'react';
import { Table } from 'quanta-design';

const columns = [
  { title: '链ID', dataIndex: 'chain_code' },
  { title: '链类型', dataIndex: 'chain_type' },
  { title: '版本', dataIndex: 'version' },
  { title: '链名', dataIndex: 'chain_name' },
  { title: '部署类型', dataIndex: 'deploy_type' },
  { title: '状态', dataIndex: 'status' },
];

const dataSource = [
  {
    chain_code: 'bc012018101641984056',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '通用链',
    deploy_type: '集群部署',
    status: '运行',
  },
  {
    chain_code: 'bc012018101641984021',
    chain_type: 'fabric',
    version: 'V0.9.7',
    chain_name: '联通链',
    deploy_type: '集群部署',
    status: '运行',
  },
  {
    chain_code: 'bc012018101641983221',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '测试链',
    deploy_type: '集群部署',
    status: '运行',
  },
];

export default () => (
  <Table
    columns={columns}
    dataSource={dataSource}
    rowKey="chain_code"
    bordered
    // onChange={handleChange}
    pagination={{
      total: 500,
      defaultCurrent: 1,
      defaultPageSize: 10,
      showQuickJumper: true,
      showSizeChanger: true,
    }}
  />
);
```

### 基本分页

```jsx
import React from 'react';
import { Table } from 'quanta-design';

const columns = [
  { title: '链ID', dataIndex: 'chain_code' },
  { title: '链类型', dataIndex: 'chain_type' },
  { title: '版本', dataIndex: 'version' },
  { title: '链名', dataIndex: 'chain_name' },
  { title: '部署类型', dataIndex: 'deploy_type' },
  { title: '状态', dataIndex: 'status' },
];

const dataSource = [
  {
    chain_code: 'bc012018101641984056',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '通用链',
    deploy_type: '集群部署',
    status: '运行',
  },
  {
    chain_code: 'bc012018101641984021',
    chain_type: 'fabric',
    version: 'V0.9.7',
    chain_name: '联通链',
    deploy_type: '集群部署',
    status: '运行',
  },
  {
    chain_code: 'bc012018101641983221',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '测试链',
    deploy_type: '集群部署',
    status: '运行',
  },
];

export default () => (
  <Table
    columns={columns}
    dataSource={dataSource}
    rowKey="chain_code"
    pagination={{ total: 200 }}
  />
);
```

### 可展开

```jsx
import React from 'react';
import { Table } from 'quanta-design';

const columns = [
  { title: '链ID', dataIndex: 'chain_code' },
  { title: '链类型', dataIndex: 'chain_type' },
  { title: '版本', dataIndex: 'version' },
  { title: '链名', dataIndex: 'chain_name' },
  { title: '部署类型', dataIndex: 'deploy_type' },
  { title: '状态', dataIndex: 'status' },
];

const dataSource = [
  {
    chain_code: 'bc012018101641984056',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '通用链',
    deploy_type: '集群部署',
    status: '运行',
  },
  {
    chain_code: 'bc012018101641984021',
    chain_type: 'fabric',
    version: 'V0.9.7',
    chain_name: '联通链',
    deploy_type: '集群部署',
    status: '运行',
  },
];

export default () => (
  <Table
    columns={columns}
    dataSource={dataSource}
    rowKey="chain_code"
    bordered
    expandable={{
      rowExpandable: reord => true,
      expandedRowRender: () => '我展开了。。。',
    }}
    pagination={{
      total: 500,
      defaultCurrent: 1,
      defaultPageSize: 10,
      showQuickJumper: true,
      showSizeChanger: true,
    }}
  />
);
```

### 默认空数据文案

```jsx
import React from 'react';
import { Table } from 'quanta-design';

const columns = [
  { title: '链ID', dataIndex: 'chain_code' },
  { title: '链类型', dataIndex: 'chain_type' },
  { title: '版本', dataIndex: 'version' },
  { title: '链名', dataIndex: 'chain_name' },
  { title: '部署类型', dataIndex: 'deploy_type' },
  { title: '状态', dataIndex: 'status' },
];

export default () => (
  <Table columns={columns} dataSource={[]} rowKey="chain_code" bordered />
);
```

### 修改空数据文案

传递 emptyTableText 参数修改空数据图案下的文案

```jsx
import React from 'react';
import { Table } from 'quanta-design';

const columns = [
  { title: '链ID', dataIndex: 'chain_code' },
  { title: '链类型', dataIndex: 'chain_type' },
  { title: '版本', dataIndex: 'version' },
  { title: '链名', dataIndex: 'chain_name' },
  { title: '部署类型', dataIndex: 'deploy_type' },
  { title: '状态', dataIndex: 'status' },
];

export default () => (
  <Table
    columns={columns}
    dataSource={[]}
    rowKey="chain_code"
    bordered
    emptyTableText="这是一条自定义的空数据文案"
  />
);
```

### 指定空数据文案

```jsx
import React from 'react';
import { Table } from 'quanta-design';

const columns = [
  { title: '链ID', dataIndex: 'chain_code' },
  { title: '链类型', dataIndex: 'chain_type' },
  { title: '版本', dataIndex: 'version' },
  { title: '链名', dataIndex: 'chain_name' },
  { title: '部署类型', dataIndex: 'deploy_type' },
  { title: '状态', dataIndex: 'status' },
];

export default () => (
  <Table
    columns={columns}
    dataSource={[]}
    rowKey="chain_code"
    bordered
    locale={{
      emptyText: '这是一条自定义的空数据文案',
    }}
  />
);
```

### 搜索结果空数据

```jsx
import React from 'react';
import { Table } from 'quanta-design';

const columns = [
  { title: '链ID', dataIndex: 'chain_code' },
  { title: '链类型', dataIndex: 'chain_type' },
  { title: '版本', dataIndex: 'version' },
  { title: '链名', dataIndex: 'chain_name' },
  { title: '部署类型', dataIndex: 'deploy_type' },
  { title: '状态', dataIndex: 'status' },
];

const handleReload = () => console.log('reload');

export default () => (
  <Table
    columns={columns}
    dataSource={[]}
    rowKey="chain_code"
    bordered
    searchValue="123"
    handleReload={handleReload}
  />
);
```

### 默认的工具栏

工具栏定位在表格的右上角，可以开启绝对定位。

```jsx
import React from 'react';
import { Table } from 'quanta-design';

const columns = [
  {
    title: '链ID',
    dataIndex: 'chain_code',
    defaultSelected: true,
    disableSelection: true,
  },
  { title: '链类型', dataIndex: 'chain_type', defaultSelected: true },
  { title: '版本', dataIndex: 'version', defaultSelected: true },
  { title: '链名', dataIndex: 'chain_name', defaultSelected: true },
  { title: '部署类型', dataIndex: 'deploy_type', defaultSelected: true },
  { title: '状态', dataIndex: 'status' },
];

const dataSource = [
  {
    chain_code: 'bc012018101641984056',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '通用链',
    deploy_type: '集群部署',
    status: '运行',
  },
  {
    chain_code: 'bc012018101641984021',
    chain_type: 'fabric',
    version: 'V0.9.7',
    chain_name: '联通链',
    deploy_type: '集群部署',
    status: '运行',
  },
];

const handleRefresh = () => console.log('hehe');

export default () => (
  <Table
    columns={columns}
    dataSource={dataSource}
    rowKey="chain_code"
    bordered
    locale={{
      emptyText: '这是一条自定义的空数据文案',
    }}
    operations={[{ refreshable: {} }, { columnSelector: {} }]}
  />
);
```

### 可选择

```jsx
import React from 'react';
import { Table } from 'quanta-design';

const columns = [
  {
    title: '链ID',
    dataIndex: 'chain_code',
    defaultSelected: true,
    disableSelection: true,
  },
  { title: '链类型', dataIndex: 'chain_type', defaultSelected: true },
  { title: '版本', dataIndex: 'version', defaultSelected: true },
  { title: '链名', dataIndex: 'chain_name', defaultSelected: true },
  {
    title: '看看你叫个什么名字啊啊啊啊啊啊啊',
    dataIndex: 'deploy_type',
    defaultSelected: true,
  },
  { title: '状态', dataIndex: 'status' },
];

const dataSource = [
  {
    chain_code: 'bc012018101641984056',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '通用链',
    deploy_type: '集群部署',
    status: '运行',
  },
  {
    chain_code: 'bc012018101641984021',
    chain_type: 'fabric',
    version: 'V0.9.7',
    chain_name: '联通链',
    deploy_type: '集群部署',
    status: '运行',
  },
];

const handleRefresh = () => console.log('hehe');

export default () => (
  <div style={{ paddingTop: 20 }}>
    <Table
      columns={columns}
      dataSource={dataSource}
      rowKey="chain_code"
      bordered
      locale={{
        emptyText: '这是一条自定义的空数据文案',
      }}
      operations={[{ refreshable: {} }, { columnSelector: {} }]}
      optAbsolute
    />
  </div>
);
```

### 自定义的工具栏

```jsx
import React from 'react';
import { Table, Button } from 'quanta-design';
const dataSource = [
  {
    chain_code: 'bc012018101641984056',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '通用链',
    deploy_type: '集群部署',
    status: '运行',
  },
  {
    chain_code: 'bc012018101641984021',
    chain_type: 'fabric',
    version: 'V0.9.7',
    chain_name: '联通链',
    deploy_type: '集群部署',
    status: '运行',
  },
];

const columns = [
  {
    title: '链ID',
    dataIndex: 'chain_code',
    defaultSelected: true,
  },
  { title: '链类型', dataIndex: 'chain_type', defaultSelected: true },
  { title: '版本', dataIndex: 'version', defaultSelected: true },
  { title: '链名', dataIndex: 'chain_name', defaultSelected: true },
  { title: '部署类型', dataIndex: 'deploy_type', defaultSelected: true },
  { title: '自定义设置看看', dataIndex: 'status' },
];

class customTable extends React.Component {
  constructor() {
    super();
    this.state = {
      columns: [],
      dataSource: [],
    };
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({ columns, dataSource });
    }, 5000);
  }

  render() {
    const operations = [
      {
        refreshable: {
          hoverText: '自定义刷新',
          onClick: () => console.log('hehe'),
        },
      },
      {
        columnSelector: {
          hoverText: '自定义设置',
          renderProps: {
            width: 380,
            overlayTitle: '这是我的自定义设置',
            colNum: 3,
            ellipsisNum: 4,
          },
        },
      },
      {
        custom: (
          <div style={{ display: 'inline-block', marginLeft: 4 }}>
            <Button>test</Button>
          </div>
        ),
      },
    ];
    return (
      <Table
        columns={this.state.columns}
        dataSource={this.state.dataSource}
        rowKey="chain_code"
        bordered
        operations={operations}
      />
    );
  }
}
export default customTable;
```

### 带有筛选功能的表格

```jsx
import React from 'react';
import { Table, Button } from 'quanta-design';
const dataSource = [
  {
    chain_code: 'bc012018101641984056',
    chain_type: 'hyperchain',
    version: 'V1.8.2',
    chain_name: '通用链',
    deploy_type: '集群部署',
    status: '运行',
  },
  {
    chain_code: 'bc012018101641984021',
    chain_type: 'fabric',
    version: 'V0.9.7',
    chain_name: '联通链',
    deploy_type: '集群部署',
    status: '运行',
  },
];

class customTable extends React.Component {
  constructor() {
    super();
    this.state = {
      columns: [],
      dataSource,
    };
  }

  handletablefilter = (value, colName) => {
    console.log('handletablefilter', value, colName);
  };

  handletableclear = () => {
    console.log('handletableclear');
  };

  handleChange = (page, filter) => {
    console.log('handle table change', filter);
  };

  render() {
    const columns = [
      {
        title: '链ID',
        dataIndex: 'chain_code',
        defaultSelected: true,
        disableSelection: true,
      },
      {
        title: '链类型',
        dataIndex: 'chain_type',
        defaultSelected: true,
        filters: [
          {
            text: 'hyc',
            value: 'hyc',
          },
          {
            text: 'hyc2',
            value: 'hyc2',
          },
          {
            text: 'hyc3',
            value: 'hyc3',
          },
          {
            text: 'hyc4',
            value: 'hyc4',
          },
          {
            text: 'Submenu',
            value: 'Submenu',
            children: [
              {
                text: 'Green',
                value: 'Green',
              },
              {
                text: 'Black',
                value: 'Black',
              },
            ],
          },
        ],
        onTableFilterChange: value =>
          this.handletablefilter(value, 'chain_type'),
      },
      {
        title: '版本',
        dataIndex: 'version',
        defaultSelected: true,
        sorter: true,
      },
      { title: '链名', dataIndex: 'chain_name', defaultSelected: true },
      { title: '部署类型', dataIndex: 'deploy_type', defaultSelected: true },
      { title: '状态', dataIndex: 'status' },
    ];
    const operations = [
      {
        refreshable: {
          hoverText: '自定义刷新',
          onClick: () => console.log('hehe'),
        },
      },
      {
        columnSelector: {
          hoverText: '自定义设置',
          renderProps: {
            width: 380,
            overlayTitle: '这是我的自定义设置',
            colNum: 3,
            ellipsisNum: 4,
          },
        },
      },
      {
        custom: (
          <div style={{ display: 'inline-block', marginLeft: 4 }}>
            <Button>test</Button>
          </div>
        ),
      },
    ];
    return (
      <div style={{ position: 'relative' }}>
        <Table
          columns={columns}
          onTableFilterClear={this.handletableclear}
          onChange={this.handleChange}
          operations={[
            { refreshable: {} },
            {
              columnSelector: {
                hoverText: '自定义设置',
                renderProps: {
                  width: 380,
                  overlayTitle: '这是我的自定义设置',
                  colNum: 3,
                  ellipsisNum: 4,
                },
              },
            },
          ]}
          dataSource={this.state.dataSource}
          rowKey="chain_code"
          showSorterTooltip={false}
        />
      </div>
    );
  }
}
export default customTable;
```

## API

| 参数               | 说明                                                                                                                 | 类型                           | 默认值    |
| ------------------ | -------------------------------------------------------------------------------------------------------------------- | ------------------------------ | --------- |
| emptyTableText     | 空表状态下，默认图片下方的文案                                                                                       | string                         |           |
| operations         | 工具栏                                                                                                               | object[], 详见 operations 参数 | []        |
| optAbsolute        | 设置工具栏是否开启绝对定位，开启则相对表格位置进行绝对定位                                                           | boolean                        | false     |
| columns            | 新增 defaultSelected(该列是否默认显示) 和 disableSelection(该列显示属性不可改变)，仅开启 columnSelector 工具之后有效 | object[]                       | []        |
| onTableFilterClear | 清除所有筛选项时的回调                                                                                               | func                           | undefined |

## columns

columns 配置下新增 onTableFilterChange 配置项。<br />
使用场景：操作 label 栏的时候不会触发 onChange 函数，这个时候需要使用 onTableFilterChange。

| 参数                | 说明                            | 类型                     | 默认值   |
| ------------------- | ------------------------------- | ------------------------ | -------- |
| onTableFilterChange | 入参为用户筛选的选项的 key 数组 | func(string[]) => {}     | () => [] |
| filterSize          | 筛选项的宽度                    | 'small'/'middle'/'large' | 'middle' |

### operations

operations 目前包含两个定义好的工具类型：刷新 refreshable 和列选择 columnSelector。<br />
传递空对象即开启对应工具，例如 operations: [{refreshable: {}}, {columnSelector: {}}]，不传递则不开启。<br />
可以自定义工具，也可以传递定义之外的工具，参见例子【自定义工具栏】。

> 注意：如果需要开启 columnSelector 工具，必须配置 columns 属性的 defaultSelected 和 disableSelection 参数。

| 参数        | 说明                                                                                                                                                       | 类型              | 默认值        |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------------- |
| hoverText   | 按钮 hover 时展示的文案                                                                                                                                    | string            | "刷新"/"设置" |
| onClick     | 按钮点击时的回调（columnSelector 会覆盖按钮的 onClick 方法）                                                                                               | function(e:Event) | () => {}      |
| renderProps | 修改按钮之外的属性，适用于逻辑复杂的按钮。以 columnSelector 按钮为例，暴露了 overlayTitle、colNum 两个可以直接修改的属性，其余属性会直接作用于下拉菜单上。 | object            | {}            |

#### operations.renderProps

| 参数         | 说明               | 类型   | 默认值           |
| ------------ | ------------------ | ------ | ---------------- |
| overlayTitle | 下拉菜单的标题     | string | "自定义列表字段" |
| colNum       | 列名展示的列数     | number | 2                |
| ellipsisNum  | 列名过长省略的字数 | number | 9                |