How to add Horizontal Scrollbar in a React Bootstrap Table?

Question

I am using React Bootstrap Table and I want to add Horizontal Scrollbar only to the last two columns. Last two columns should be wrapped in a scrollable container. How can we implement this?

const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name'
}, {
  dataField: 'price',
  text: 'Product Price'
}, {
  dataField: 'month',
  text: 'Product month'
}. {
  dataField: 'year',
  text: 'Product year'
}];

class App extends Component {
  render() {
    return (
     <BootstrapTable
        keyField="id"
        data={ products }
        columns={ columns }
        striped
        hover
        condensed
     />
    );
  }
}

export default App;

Answer 1

Simply add "responsive"

<BootstrapTable
        responsive
        keyField="id"
        data={ products }
        columns={ columns }
        striped
        hover
        condensed
     />