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

## 使用

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

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

### 基本使用

```jsx 
import React from 'react';
import { Table } from 'baas-ui';

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={false}
  />
);
```

### 带边框
```jsx 
import React from 'react';
import { Table } from 'baas-ui';

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
    pagination={false}
  />
);
```

### 分页器
```jsx 
import React from 'react';
import { Table } from 'baas-ui';

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,
    }}
  />
);
```