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.