我正在使用React-Bootstrap-Table-2来开发表格显示等 所以今天我已经成功地将表格添加到我的代码中,现在我想在表格标题顶部添加排序和搜索功能两个功能
我的代码如下:
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
}}
/>
之后,排序函数可能无法理解您存储的值。因此,您可以在列参数中添加一个shortValue:
sortValue: (cell, row) => methodToHaveRightValue()
关于reactjs - React Bootstrap Table2 排序和搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62420851/