React Bootstrap Table2 сортировка и поиск - PullRequest
Новая
       21

React Bootstrap Table2 сортировка и поиск

1 голос
/ 17 июня 2020

Я использую 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, ну, по крайней мере, на него можно было щелкнуть, но похоже, что у него нет никакого действия для сортировки

Что касается функции поиска , это правильно, если я добавил в указанное выше место кода?

Пример изображения для моего вывода: enter image description here

1 Ответ

0 голосов
/ 29 июня 2020

Вы можете просто добавить оба параметра в массив столбцов: 

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 в свой параметр coloms: 

   sortValue: (cell, row) => methodToHaveRightValue()

Exemple: StoryBookSortValueCustom

...