React Bootstrap Table2 排序和搜索答案

【问题标题】：React Bootstrap Table2 sorting and searchReact Bootstrap Table2 排序和搜索
【发布时间】：2020-09-23 19:16:26
【问题描述】：

我正在使用 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，至少它是可点击的，但它似乎没有任何排序操作

至于搜索功能，如果我添加到上面的代码位置是否正确？

我的输出示例图片：

【问题讨论】：

标签： reactjs react-bootstrap react-bootstrap-table

【解决方案1】：

您可以在列数组中添加这两个参数：

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()

例如：StoryBookSortValueCustom

【讨论】：