Horizontal Scrolling

[matthewpolkiewiczsc]

Is there a way to customize whether you want horizontal scrolling? In the first project I used this with, horizontal scrolling would appear if the page went below a certain width. Now in my new project, the cells just become smaller and smaller as you decrease the page width. Is there a setting or css property to change this behavior?

[AllenFang]

@matthewpolkiewiczsc, for a large column table after v2.0.0, the horizontal scrollbar will be not display automatically. The solution is set width on some columns to make the total width of table exceed the outer then the horizontal scrollbar will display. Check this example(BTW, It's not necessary to set width on all columns).

You can check #331 for v2.0.0

[dannysindra]

I am also working on large table. After update to v2.0.0, if I did not set width for certain columns, some columns will mysteriously disappear when I click them to editable mode.

So just to be safe, I would advise to set width for every column.

[AllenFang]

Like @dannysindra said, it's a restriction on v2.0.0. @matthewpolkiewiczsc hope you can try it by our suggestion. Thanks :)

[tharunsikhinam]

You could also set width property in containerStyle to a value greater than 100%
<BootstrapTable containerStyle={{width: '200%',overflowX: 'scroll'}} />
This would let you use percentage values for width in TableHeaderColumn.
ex: <TableHeaderColumn
width={"25%"}/>

[F-Adam-B]

I'm attempting to use react-bootstrap-table2 for a table with 20+ columns. Is there a way to use react-bootstrap-table2 with so many columns, whether horizontal scrolling or some column header pagination?