可反应的可过滤不会产生输入框

时间:2017-04-25 09:33:34

标签: reactjs

使用Reactable我已经制作了一张分页表,效果很好。

我想添加过滤功能。

当前表:

<ReactTable
    className='-striped -highlight'
    data={data}
    columns={columns}
    defaultPageSize={20}
/>

这很有效。

根据文档on Github,我只需在表格中添加filterable即可。 If the filterable property is provided, then an input box with class reactable-filter-input will be prepended to the thead of the table.

<ReactTable
            className='-striped -highlight'
            data={data}
            columns={columns}
            defaultPageSize={20}
            filterable={['Time', 'Type']}
/>

但是,没有输入框。我错过了一步吗? TimeType是我的两个专栏。并使用data正确呈现和显示表格。

示例代码:

const ReactTable = require('react-table').default;
// .... 

render () {

    let data = this.props.data;

    const columns = [{
        header: 'Time',
        accessor: 'time'
    }, {
        header: 'Type',
        accessor: 'type',
    }];

    let tableArr = [];

    for(let i = 0; i < data.length; i++) {
        tableArr.push({
                time: epochToDateTime(data[i].ts),
                type : data[i].type,
            });
    }

    return (
        <div style={{width: "100%"}}>
                    <ReactTable className='-striped -highlight'
                                data={tableArr}
                                columns={columns}
                                defaultPageSize={this.pageSize}
                                filterable={['Time']}/>
         </div>
    )
}

0 个答案:

没有答案