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;
Simply add "responsive"