# Table组件
![](http://p7.qhimg.com/t01c802fb8b2950d819.png)

## 使用方法
```javascript
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Table from './components/Table';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRowKeys: ['1', '2', '3', '4'],
      visible: false
    }
  }

  onSelectChange = (selectedRowKeys, isAll) => {
    console.log(selectedRowKeys, isAll)
  }

  render() {
    Date.prototype.tolocaleStr = function () {
      return this.getFullYear() + '-' + (this.getMonth() + 1) + '-' + this.getDate();
    }
    const columns = [{
      title: '推广计划', dataIndex: 'plan', key: 'plan', width: 200,
    }, {
      title: '启用/暂停', dataIndex: 'power', key: 'power', 
    }, {
      title: '开始时间', dataIndex: 'starttime', key: 'starttime', render: (record, item, index) => new Date(item).tolocaleStr()
    }, {
      title: '结束时间', dataIndex: 'endtime', key: 'endtime',
    }, {
      title: '否定关键词', dataIndex: 'keyword', key: 'keyword',
    }];
    
    const data = [];
    for (let i = 0;i < 100; i++) {
      data.push({
        plan: '湖北培训实训' + i,
        power: (i % 2)?'启用':'暂停',
        starttime: parseInt(13242216 + (Math.random() * 1000000)),
        endtime: 1524216493195,
        keyword: (i % 2)?'是':'否',
        key: i
      })
    }
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: this.onSelectChange,

    }

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro" onClick={this.showComfirm}>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <Table 
          columns={columns} 
          data={data}
          rowSelection={rowSelection}
          onRow={(record, index) => {return {
            onClick: () => {
              console.log(record, index)
            }
          }}}
        />
      </div>
    );
  }
}

export default App;

```
其中columns跟data两个list的值要注意的是每一项都应该有key字段，如果没传的话，可能会出现很奇怪的错误。

## 属性说明

### Table
| 参数       | 说明                         | 类型    | 可选值 | 默认值 |
| ---------- | --------------------------- | ------- | ----- | ----- |
| columns    | 表格列配置描述，具体参数见下表 | Array   |   —   |   —  |
| data       | 数据源                       | Array   |   —   |   —  |
| rowSelection | 列表项是否可选（具体看下表的rowSelection有哪些配置项）          | Object  |   —   |   —  |
| onRow      | 行属性，例如onClick,onMouseEnter,onMouseLeave...            | Function |   —  |  —   |
| noneText   | 数据为空时显示的文案          | String  | — | 暂无数据 |
|handleSort  |用户传入的排序的方法(服务端排序 用户只需在该方法中做业务排序)            |Function|-  
|summationData|如果用户传入该字段 则说明需要有合计这一行 传入的参数为数组 只需要将值按照column的顺序传入即可 组件将自动按照length的长短 定义合计合并几个单元格
onRow的用法，适用于 onRow、onCell
```javascript
  <Table 
    columns={columns} 
    data={data}
    rowSelection={rowSelection}
    onRow={(record, index) => {return {
      onClick: () => {
        console.log(record, index)
      },
      onMouseEnter: () => {
        console.log('mouse enter')
      },
      onMouseLeave: () => {
        console.log('mouse leave')
      }
      ...
    }}}
  />
```
### rowSelection
| 参数       | 说明                         | 类型    | 可选值 | 默认值 |
| ---------- | --------------------------- | ------- | ----- | ----- |
| selectedRowKeys | 默认选中的keyList       | Array  |   —   |   —  |
| onChange  | 在发生change事件的时候的回调函数必填项,参数是选中的行的key，通常会把id当作key值 | Function(selectedRowKeys, isAll)  |   —   |   —  |
| columnsWidth | 列的宽度                   | Number | — | — |
| indeterminate | 是否开启选择全部           | Boolean | — | — |

indeterminate 示例:
![](http://p4.qhimg.com/t014e3869c03a9ae797.gif)

### columns
| 参数       | 说明                         | 类型    | 可选值 | 默认值 |
| ---------- | --------------------------- | ------- | ----- | ----- |
| title      | 列名                         | String/ReactNode |   —   |   —  |
| dataIndex  | 在列数据中对应的key           | String  |   —   |   —  |
| key        | React需要的key               | String  |   —   |   —  |
| onCell     | 单元格属性，同onRow           | Function |   —  |  —   |
| width      | 单元格的宽度                  | Number  |   —   |   —  |
| render     | 生成复杂数据的渲染函数，参数分别为当前行的数据，当前单元格的值，当前行的索引，例如对数据格式化，填充单元格 | Function(record, item, index) | — | — |
| sort       | 是否开启排序，注意此排序是借助Array的sort方法实现，可能会存在精确度的问题                 | Boolean | —  | —  |