Trouble with react-bootstrap-table width

Question

I use react-bootstrap-table and need the vertical scroll. My code:

<BootstrapTable data={products} hover>
      <TableHeaderColumn isKey dataField='id' width='10%'>
          Product ID
      </TableHeaderColumn>
      <TableHeaderColumn dataField='name'>
          Product Name
      </TableHeaderColumn>
      <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
</BootstrapTable>

This code works fine and I get the auto width resizable table. After that, I added next key:

<BootstrapTable data={products} hover height='200px'>

and got the problem with 100% width, instead of resizing table width I got one more scroll like in the picture below:

How can I fix this?

Answer 1

I also opened the issue and creator of the library advised the solution:

You have to add printable key on BootstrapTable

Also, I added bodyStyle={{overflow: 'overlay'}} on BootstrapTable too.

Answer 2

Just wanted to add this here because I spent a ton of time trying to figure out how fix misalignment when using an expanded row.

All of this only applies when the table has verticle scroll bars.

I had a bit of a unique problem in that I have a collapsible sidebar that effects the table width. When the sidebar is collapsed and I expand the row, the table autosizes the column width. When I re-collapse the sidebar, the table is too wide and causes horizontal scrollbars. In addition to that, the table re-calculates the column width everytime the user expands a row.

My solution was to get rid of the verticle scrollbar during render:

componentWillUpdate(){
    document.querySelector('.react-bs-table-container').style.height = "auto"
}
componentDidUpdate(){
    document.querySelector('.react-bs-table-container').style.height = "100%"
}

componentWillUpdate is going away soon, but for now it is working perfectly.