1

I'm trying to use react-bootstrap-table-next to render a table with over 20 columns. Right now my data is rendering, but with so many columns the text is compressed. Is there a horizontal scroll option or column header pagination for such a table?

Thanks!

Adam Bradbury
  • 91
  • 2
  • 11

2 Answers2

0

If you have a table that is too wide, maybe you could try the following:

Add a container element,with a custom css class that sets: overflow-x:auto, around the table. This should display a horizontal scroll bar when necessary. For example:

HTML:

<div class="table-horiz-scroll" >
  <table>
    <tr><!-- row headers--></tr>
    <tr><!-- row 1 data--></tr>
    <tr><!-- row 2 data--></tr>
    <tr><!-- ... --></tr>
    <tr><!-- row n data--></tr>
  </table>
</div>

CSS:

 .table-horiz-scroll {
    overflow-x:auto;
 }

Hopefully that helps!

Nathan
  • 7,853
  • 4
  • 27
  • 50
  • Thanks for the answer but if 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? https://stackoverflow.com/questions/64114303/how-to-add-horizontal-scrollbar-in-a-react-bootstrap-table – Kunal Tyagi Sep 29 '20 at 08:06
0

Simple solution, add 'responsive' to table.

import Table from 'react-bootstrap/Table'

 <Table responsive>

Official docs for detailed answer

Muhammad Mubashirullah Durrani
  • 329
  • 3
  • 16