title: React Bootstrap Table2 sorting and search
body: <p>I am using <strong>React-Bootstrap-Table-2</strong> 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</p>
  
  <p>My code as follow:</p>
  
  <pre><code>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;
  </code></pre>
  
  <p>I try to work around on my columns by:</p>
  
  <pre><code>const columns = [{
        dataField: 'ProductID',
        text: 'ProductID',
        sort: true
        headerStyle: colStyle
      },
  </code></pre>
  
  <p>adding <code>sort: true</code>, well at least it was clickable, but it seems like it don't have any sorting action</p>
  
  <p>As for the <em>Search function</em>, is it correct if I added to above code location?</p>
  
  <p>The example image for my output: <a href="https://i.stack.imgur.com/ZQz4H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZQz4H.png" alt="enter image description here"></a></p>