使用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']}
/>
但是,没有输入框。我错过了一步吗? Time
和Type
是我的两个专栏。并使用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>
)
}