## 表格组件

引用
```js
import {Table,TableSort,CollapseTable,AutoTable,AutoCollapseTable} from 'imui/dist/table'
```


## Table
封装以下功能：
- 数据展示
- 选中
### 属性列表
| 属性 | 说明 | 类型 | 默认值 |
| :--- | :--- | :--- | :--- |
| cols | 配置每列表头 | `arrayOf({display: PropTypes.any.isRequired,width: PropTypes.number}).isRequired` | `undefined` |
| data | 表格体的数据 二维数组 如果数组元素是 React组件实例：展示元素本身 else：展示元素toString() 如果数组元素是空字符串或者==null会显示为'-' 会读取一维数组（data[i].style）的style属性作为<tr>的style,会读取一维数组（data[i].className）的style属性作为</tr>的className | `arrayOf(React.PropTypes.array)` | `undefined` |
| canSelect | 是否可以选择行，可以的话会在左边显示checkbox来供选择 | `bool` | `false` |
| onSelectedChange | 但被选中但行发生变化时回调 onSelectedChange(rowsSelectedChange) | `func` | `undefined` |
| onRowClick | 当其中一行被onClick是回调 callback(data[i]) | `func` | `undefined` |
| differentiateRow | 给相邻两行设置不同的背景颜色，做视觉区分 | `bool` | `true` |
| overlap | 悬浮展示在表格的正中间 | `any` | `undefined` |
| noDataMsg | 当没有数据时显示 | `any` | `没有数据` |
### cols属性列表
| 属性 | 说明 | 类型 | 默认值 |
| :--- | :--- | :--- | :--- |
| display | 表格头部一列名称 如果数组元素是 React组件实例：展示元素本身 else：展示元素toString() | `array.isRequired` | `undefined` |
| width | 表格一列所占宽度百分比 | `number` | `undefined` |
| colspan | 跨列,默认为1 | `number` | `1` |


## CollapseTable
可折叠行表格,封装自Table，具有以下功能：
- 可折叠部分行
### 属性列表
| 属性 | 说明 | 类型 | 默认值 |
| :--- | :--- | :--- | :--- |
| tableProps | 透传给Table组件的属性 | `shape(Table.propTypes)` | `undefined` |
| cols | 配置每列表头 | `arrayOf({display: PropTypes.any.isRequired,width: PropTypes.number}).isRequired` | `undefined` |
| data | 表格体的数据,一维数组 | `arrayOf(React.PropTypes.array)` | `undefined` |
| overlap | 悬浮展示在表格的正中间 | `any` | `undefined` |
### data属性列表
| 属性 | 说明 | 类型 | 默认值 |
| :--- | :--- | :--- | :--- |
| row | 一维数组，当前一行需要的数据。该行会一直显示，通过点击来控制是否显示对应被控制的折叠的行是否显示 如果数组元素是 React组件实例：展示元素本身 else：展示元素toString()  如果数组元素是空字符串或者==null会显示为'-' | `array.isRequired` | `undefined` |
| collapseRows | 当前这行控制的可以被折叠的行,二维数组 | `arrayOf(PropTypes.array)` | `undefined` |
| showCollapseRows | 是否显示,当前这行控制的可以被折叠的行 | `arrayOf(PropTypes.array)` | `false` |

## AutoTable
数据表格组件，封装自Table,具有以下功能：
- 自动分页
- 数据缓存
- 选中
- 排序
- 筛选
### 属性列表
| 属性 | 说明 | 类型 | 默认值 |
| :--- | :--- | :--- | :--- |
| maxRow | 一页里最大显示行数，如果要显示的行数超过max就在底部显示出分页组件 | `number` | `5` |
| cache | 是否缓存数据。 如果开启缓存已经加载过的数据就不会再触发onNeedMoreData去询问更多数据 如果没有开启就会在每次切换页面时触发onNeedMoreData去询问更多数据 默认开启 | `bool` | `true` |
| cols | 配置每列表头 | `arrayOf().isRequired` | `undefined` |
| fetch | fetch负责通过当前的查询参数去请求CGI获取数据  fetch函数必须返回一个会resolve {rows:Array ,total:number}的Promise resolve rows的数组代表在当前查询条件下查询到的所有行 resolve total 属性代表一共有多少行数据 如果请求数据发生错误请 reject(错误原因) 如果resolveData告诉了total才去更新state里的total，否则沿用以前的 | `func.isRequired` | `undefined` |
| translateRow | 给你代表表格一行的原数据，你给我代表这行的jsx用于展示 最后返回的是一个数组 translateRow(rowData,index) => [jsx] | `func.isRequired` | `undefined` |
| tableProps | 透传到Table的属性 | `shape(Table.propTypes)` | `undefined` |
| persistence | 持久化 AutoTable | `shape({get: PropTypes.func,set: PropTypes.func})` | `{}` |
| onPageChange | 监听 AutoTable page变化 | `func` | `(newPage: number, prevPage: number) => void` |
### cols属性列表
| 属性 | 说明 | 类型 | 默认值 |
| :--- | :--- | :--- | :--- |
| display | 表格头部一列名称 如果数组元素是 React组件实例：展示元素本身 else：展示元素toString() | `array.isRequired` | `undefined` |
| width | 表格一列所占宽度百分比 | `number` | `undefined` |
| colspan | 跨列,默认为1 | `number` | `1` |
| sort | 该表头是否需要排序，如果需要排序  1.该列只有一个排序选项：请传入一个只有一个元素的[SortType]类型的Arrays  2.该列有多个排序选项:请传入一个[SortType]类型的Arrays | `arrayOf` | `undefined` |
### sort属性列表
| 属性 | 说明 | 类型 | 默认值 |
| :--- | :--- | :--- | :--- |
| display | 表格头部一列名称 如果数组元素是 React组件实例：展示元素本身 else：展示元素toString() | `array.isRequired` | `undefined` |
| key | 用于表示该排序方法的唯一key | `string.isRequired` | `undefined` |
| value | 默认排序方法 1=顺序 -1=逆序 如果==null表示当前排序方法默认不启用 | `oneOf([-1, 1])` | `undefined` |


## AutoCollapseTable
可折叠行表格数据表格组件，封装自CollapseTable,具有以下功能：
- 可折叠部分行
- 自动分页
- 数据缓存
- 选中
- 排序
- 筛选
### 属性列表
| 属性 | 说明 | 类型 | 默认值 |
| :--- | :--- | :--- | :--- |
| maxRow | 一页里最大显示行数，如果要显示的行数超过max就在底部显示出分页组件 | `number` | `5` |
| cache | 是否缓存数据。 如果开启缓存已经加载过的数据就不会再触发onNeedMoreData去询问更多数据 如果没有开启就会在每次切换页面时触发onNeedMoreData去询问更多数据 默认开启 | `bool` | `true` |
| cols | 配置每列表头 | `arrayOf().isRequired` | `undefined` |
| fetch | fetch负责通过当前的查询参数去请求CGI获取数据  fetch函数必须返回一个会resolve {rows:Array ,total:number}的Promise resolve rows的数组代表在当前查询条件下查询到的所有行 resolve total 属性代表一共有多少行数据 如果请求数据发生错误请 reject(错误原因) 如果resolveData告诉了total才去更新state里的total，否则沿用以前的 | `func.isRequired` | `undefined` |
| translateRow | 给你代表表格一行的原数据，你给我代表这行的jsx用于展示 最后返回的是一个数组 translateRow(rowData,index) => [jsx] | `func.isRequired` | `undefined` |
| collapseTableProps | 透传到CollapseTable的属性 | `shape(CollapseTable.propTypes)` | `undefined` |

## TableSort 表格排序
### 属性列表
| 属性 | 说明 | 类型 | 默认值 |
| :--- | :--- | :--- | :--- |
| options | 所有的排序选项 当options只有一个选项时不会有dropdown用于选择排序选项，直接默认只能使用第一个 | `arrayOf({display: PropTypes.any.isRequired,width: PropTypes.number}).isRequired` | `undefined` |
| defaultSort | 默认的排序方法的value | `string` | `undefined` |
| defaultOrder | 默认的排序方向 1=顺序 -1=逆序 | `oneOf([1, -1])` | `undefined` |
| onChange | 当排序的方式或者方向发生变化时回调 | `func` | `undefined` |
| active | 当前是否处于激活起作用态,处于激活状态排序指针的会高亮显示 | `bool` | `undefined` |
### options属性列表
| 属性 | 说明 | 类型 | 默认值 |
| :--- | :--- | :--- | :--- |
| display | 用来展示 | `any.isRequired` | `undefined` |
| value | 用于回调 | `any.isRequired` | `undefined` |


## DataTable 已经废弃请使用AutoTable替换
数据表格组件，封装自Table,具有以下功能：
- 自动分页
- 数据缓存
- 选中
- 排序
- 筛选
### 属性列表
| 属性 | 说明 | 类型 | 默认值 |
| :--- | :--- | :--- | :--- |
| cols | 配置每列表头 | `arrayOf({display: PropTypes.any.isRequired,width: PropTypes.number}).isRequired` | `undefined` |
| data | @transformable 表格体的数据 二维数组 如果数组元素是 React组件实例：展示元素本身 else：展示元素toString() 如果数组元素是空字符串或者==null会显示为'-' | `arrayOf(React.PropTypes.array)` | `undefined` |
| canSelect | 是否可以选择行，可以的话会在左边显示checkbox来供选择 | `bool` | `false` |
| onSelectedChange | 但被选中但行发生变化时回调 onSelectedChange(rowsSelectedChange) | `func` | `undefined` |
| loading | @transformable 是否显示正在加载中 | `bool` | `false` |
| noDataMsg | 当没有数据时显示 | `function` | `undefined` |
| canPage | 是否开启分页功能，默认开启 如果开启会在 totalRow > maxRow 时在底部显示分页组件，用户点击分页组件切换页面时会自动显示对应的数据 | `bool` | `true` |
| totalRow | 这些数据的总行数，当totalRow>maxRow时会显示分页组件 分页组件的最大页数跟进totalRow和maxRow来确定 如果totalRow没有被赋值，默认等于data.length | `number` | `undefined` |
| onNeedMoreData | 当data.length小于当前用户正处于的页数需要的数据时会调用通知去加载更多的数据 在更多的数据被加载前会先显示加载中 onNeedMoreData(currentPage, maxRow); currentPage从0开始计数 | `func` | `undefined` |
| maxRow | 一页里最大显示行数，如果要显示的行数超过max就在底部显示出分页组件 | `number` | `5` |
| onPageChange | 当用户点击分页按钮切换时回调 onPageChange(page); 从0开始计数 | `func` | `undefined` |
| overlap | 悬浮展示在表格的正中间 | `any` | `undefined` |
| noDataMsg | 当没有数据时显示 | `any` | `没有数据` |
| loadingDisplay | 正在加载中时的显示 | `any` | `加载中` |
| cache | 是否缓存数据。 如果开启缓存已经加载过的数据就不会再触发onNeedMoreData去询问更多数据 如果没有开启就会在每次切换页面时触发onNeedMoreData去询问更多数据 默认开启 | `bool` | `true` |
| onRowClick | 当其中一行被onClick是回调 callback(data[i]) | `func` | `undefined` |
| differentiateRow | 给相邻两行设置不同的背景颜色，做视觉区分 | `bool` | `true` |