React-bootstrap-table2: Horizontal Scrolling

[SamusPwns]

Hello,

Using react-bootstrap-table, when I set the width of the columns and they were larger than the viewport, the table created a horizontal scroll.

I just upgraded to react-bootstrap-table-2 and can't figure out how to replicate the functionality. It may be that I am using Bootstrap 4 which isnt compatible yet.

Am I missing something obvious. Any help would be greatly appreciated.

[Bricon66]

+1

[AllenFang]

I totally understand this feature is very important, sorry about that it's already delay due to my personal job is crazy busy. We will work hard on it

[Bricon66]

No worries man, you've done an awesome job w/ this library. Thanks.

As an FYI...here is some CSS that worked for my situation. Passing along in the event that it may help others.

.table {
overflow: auto;
display: block;
table-layout: auto;
}

[AllenFang]

@Bricon66 coool, thanks for sharing~~

[dprodigalson]

you can you wrapClasses property and set table-responsive bootstrap class...It helped for me.

[Thirunavukkarasu]

Hi @AllenFang - By any chance, is there any timeline associated with this horizontal scroll feature?

[paulalcabasa]

wrapperClasses plus css of @Bricon66 worked for me!

[hungdev]

@Bricon66 with the large screen it has white space

[denodaeus]

Any updates on this? Pretty important feature, I'd also love to get the ability to hook into the responsive breakpoint configuration for the table columns

[rohankk2]

You can just add the one line css.
.react-bootstrap-table{
overflow-x:auto !important;
}

[F-Adam-B]

I have a table that has 20+ columns. How is it possible to render a table with that many columns and no horizontal scroll option?

[ErkinKurt]

@Bricon66 with the large screen it has white space

Display attribute causing the extra whitespace. This CSS worked for me:
.table{
overflow: auto;
table-layout: auto !important;
}

[workgena]

This issue had been solved by #325. Issue can be closed.

The correct Bootstrap-way is

<div class="table-responsive">
  <tabe class="table"><!-- ... --></table>
</div>

And it can be done by following snipped

<BootstrapTable wrapperClasses="table-responsive" />

[sunilsp77]

I have a table that has 20+ columns. How is it possible to render a table with that many columns and no horizontal scroll option?

What solution did you use?

[shelooks16]

Hey, check snippet below. It works like responsive table from bootstrap.

<BootstrapTable
  bootstrap4
  wrapperClasses="table-responsive"
  rowClasses="text-nowrap"
/>

// somewhere in css
.react-bootstrap-table table {
  table-layout: auto;
}

[kunaltyagi9]

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?

[xuanZo]

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?

I have same issue

[kunaltyagi9]

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?

I have same issue

Please share the solution, if you find one

[vikramabhisheksah]

I have a table that has 20+ columns. How is it possible to render a table with that many columns and no horizontal scroll option?

What solution did you use?

You can use the react-bootstrap-table.css instead of react-bootstrap-table.min.css and then set table layout as "auto" as mentioned by @ErkinKurt