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

[Willywes]

this works for me!

.react-bootstrap-table {
  overflow-x: auto;
}

.react-bootstrap-table .table {
  width: calc(100% - 3px);
}

[jnemo44]

I am using the wrapper classes but my table is not responsive...any ideas? <BootStrapTable keyField="name" data={ data } wrapperClasses="table-responsive" rowClasses="text-nowrap" .....

[warinza]

New solution : not edit react-bootstrap-table2.css

in new css

 .div-horizontal {
  overflow: auto;
  white-space: nowrap;
}
.table {
  overflow: auto;
  table-layout: auto !important;
} 

Div Wrap BootStrapTable

 <div className="div-horizontal">
    <BootstrapTable
      bootstrap4
      keyField="KEY"
      data={valData}
      columns={columns}
      striped
      hover
      condensed
      ....
    />
  </div>

[motherchucker]

New solution : not edit react-bootstrap-table2.css

in new css

 .div-horizontal {
  overflow: auto;
  white-space: nowrap;
}
.table {
  overflow: auto;
  table-layout: auto !important;
} 

Div Wrap BootStrapTable

 <div className="div-horizontal">
    <BootstrapTable
      bootstrap4
      keyField="KEY"
      data={valData}
      columns={columns}
      striped
      hover
      condensed
      ....
    />
  </div>

@warizna I'm having a problem,

When I use table-layout scrollbar doesn't appear, the table just goes off screen. And when I don't use it, scrollbar appears but the table, and the whole div gets squished .

Do you have any idea of the solution?

[motherchucker]

Ok, I have found an issue that was causing table to not be responsive.

The problem was in some of the parent divs having a property: display: flex

I fixed it by adding a class: <div className: "container-fluid">

Maybe that helps someone.

Also, this solution mentioned above by @shelooks16 worked for me.

[hanamurayuki]

Above solutions don't work in my environment. Now, it works by adding below values.

# css
.react-bootstrap-table table {
    width: max-content;
}

If you want to fix specific column width, you can add below values.

# <BootstrapTable>
headerStyle: {width: '50px'}

[PriyanshuPundhir]

I solved this issue by making a div around it and writing CSS for it as below React :-

   <div className="table-wrapper">
    <div className="table-scroll">
      <BootstrapTable
      keyField="id"
      data={data}
      columns={columns}
      >
    </div>
  </div>

CSS :-

 .table-wrapper {
  width: 100%;
  overflow-x: scroll;
}
.table-scroll {
  width: 200%;
}