ReactTable的说明

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函数可以自定义这一列的样式以及相关样式。