CODEWITHSUNDEEP
reactjsreact-bootstrapreact-bootstrap-table
Lawraoke
Lawraoke

Reputation: 556

React Bootstrap Table2 sorting and search

I am using React-Bootstrap-Table-2 for developing table displaying and etc So today I already successfully added the table into my code, now I would like to add two features both sorting and search function on top of the table header

My code as follow:

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;

I try to work around on my columns by:

const columns = [{
      dataField: 'ProductID',
      text: 'ProductID',
      sort: true
      headerStyle: colStyle
    },

adding sort: true, well at least it was clickable, but it seems like it don't have any sorting action

As for the Search function, is it correct if I added to above code location?

The example image for my output: enter image description here

Upvotes: 2

Views: 4899

Answers (1)

Druw
Druw

Reputation: 36

You can just add the both parameters in the columns array :

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
   }}
/>

After, it can happens that the value you stored isn't understand by the sort function. So you can add a shortValue in you columns parameter :

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

Example : StoryBookSortValueCustom

Upvotes: 2

Related Questions