table样式
image.png
属性说明
| 属性名 | 说明 |
|---|---|
| tableTitle | 表头信息，具体数据格式见demo |
| tableData | 表格数据，具体数据格式见demo |
| hasPage | 是否有翻页 |
| pageSize | 每页展示的数据条数 |
| total | 数据总数 |
| isShow | 是否显示table |
| width | table的宽度 |
| height | table的长度 |
| sortFn | 点击表头排序时的回调函数 |
| pageChange | 翻页时的回调函数 |
普通table
- 翻页
import ReactTable from 'ReactTable';
getNewUsers = () => {
//翻页时请求的后端接口
}
render() {
const tableData = [{
id: 1,
name: 'Tanner Linsley',
age: 26,
},{
id: 2,
name: 'alice',
age: 27,
}];
const tableTitle = [
{
key: 'id',
name: '用户编号',
},
{
key: 'name',
name: '用户姓名',
},
{
key: 'age',
name: '用户年龄',
}
]
<ReactTable
tableData={tableData}
tableTitle={tableTitle}
pageSize={10}
pageChange={this.getNewUsers}
total={20}
>
</ReactTable>
}
- 排序
import ReactTable from 'ReactTable';
getNewUsers = () => {
//翻页时请求的后端接口
}
sortFn = (sortKeyName, direction) => {
//排序调用的函数
}
render() {
const tableData = [{
id: 1,
name: 'Tanner Linsley',
age: 26,
},{
id: 2,
name: 'alice',
age: 27,
}];
const tableTitle = [
{
key: 'id',
name: '用户编号',
sort: true, //是否有排序
},
{
key: 'name',
name: '用户姓名',
},
{
key: 'age',
name: '用户年龄',
}
]
<ReactTable
tableData={tableData}
tableTitle={tableTitle}
pageSize={10}
pageChange={this.getNewUsers}
total={20}
sortFn={this.sortFn}
>
}
进阶table
table的某些列是需要自定义样式，有些时候还需要自定义事件。demo如下
import ReactTable from 'ReactTable';
getNewUsers = () => {
//翻页时请求的后端接口
}
updateUser = () => {
//更新user信息
}
render() {
let _this = this;
const tableData = [{
id: 1,
name: 'Tanner Linsley',
age: 26
},{
id: 2,
name: 'alice',
age: 27,
}];
const tableTitle = [
{
key: 'id',
name: '用户编号',
},
{
key: 'name',
name: '用户姓名',
},
{
key: 'age',
name: '用户年龄',
},{
key: 'handle',
render: (userInfo, titleInfo, i) => {
return (
<button onclick={_this.updateUser.bind(_this,userInfo)}>编辑</button>
)
}
}
]
<ReactTable
tableData={tableData}
tableTitle={tableTitle}
pageSize={10}
pageChange={this.getNewUsers}
total={20}
>
</ReactTable>
}
对于tableTitle属性中，有render函数可以自定义这一列的样式以及相关样式。
