Reactjs React引导表2排序和搜索
我使用React-Bootstrap-Table-2开发表格显示等 因此,今天我已经成功地将表添加到代码中,现在我想在表头的顶部添加两个特性,排序和搜索功能 我的代码如下:Reactjs React引导表2排序和搜索,reactjs,react-bootstrap,react-bootstrap-table,Reactjs,React Bootstrap,React Bootstrap Table,我使用React-Bootstrap-Table-2开发表格显示等 因此,今天我已经成功地将表添加到代码中,现在我想在表头的顶部添加两个特性,排序和搜索功能 我的代码如下: render() { const colStyle = { backgroundColor: '#6c757d', color: '#ffffff', width: '100px' } // *what should I add here for search and
render() {
const colStyle = {
backgroundColor: '#6c757d',
color: '#ffffff',
width: '100px'
}
// *what should I add here for search and sorting?
const columns = [{
dataField: 'ProductID',
text: 'ProductID',
headerStyle: colStyle
}, {
dataField: 'ProductName',
text: 'ProductName',
headerStyle: colStyle
}, {
dataField: 'ProductPrice',
text: 'ProductPrice',
headerStyle: colStyle
}];
const {
filter,data
} = this.state;
我尝试通过以下方式在我的专栏上进行转换:
const columns = [{
dataField: 'ProductID',
text: 'ProductID',
sort: true
headerStyle: colStyle
},
添加sort:true
,至少它是可点击的,但它似乎没有任何排序操作
至于搜索功能,如果我添加到上面的代码位置是否正确
我的输出示例图像:您只需在列数组中添加这两个参数:
const columns = [{
dataField: 'ProductID',
text: 'ProductID',
headerStyle: colStyle,
sort: true,
filter: numberFilter(),
headerSortingStyle
}, {
dataField: 'ProductName',
text: 'ProductName',
headerStyle: colStyle,
filter: textFilter(),
sort : true,
headerSortingStyle
}, {
dataField: 'ProductPrice',
text: 'ProductPrice',
headerStyle: colStyle
sort: true,
filter: numberFilter(),
headerSortingStyle
}];
////
<BootstrapTable
keyField='id'
data={ this.state.missions }
columns={ this.state.tableColumn }
filter={ filterFactory() }
pagination={ paginationFactory(this.state.paginationOption) }
defaultSortDirection="asc"
sort={ {
//I did this to save the previous sort in the state
dataField: this.state.filter.field,
order: this.state.filter.order
}}
/>
示例:这对我来说很有效,谢谢团队
sortValue: (cell, row) => methodToHaveRightValue()