React-bootstrap-table2: Responsive Table

[juancafe4]

I want horizontal scroll in my table. I have multiple columns and they look like they are stack up together. Any suggestions ?

[theoryfarm]

I think this can be fixed with css classes. Changing:

.react-bootstrap-table table {
table-layout: fixed;
}

TO

.react-bootstrap-table table {
table-layout: auto;
}

or add a class to the component that overrides it when you need it to behave differently than the default.

[juancafe4]

yeah it works, but I wish it could look better. I tried to center my table and table-layout: auto, but the tables still going to the right.

[AllenFang]

@theoryfarm thanks your answer. @juancafe4 i think we will not support horizontal scroll in near future. Instead, I'm much interesting to support vertical scroll on table, we have PR working on it but still faced some issue.

Anyway, PR is welcome, I'm also looking forward horizontal scrollable table 👍

[hielfx]

Sorry to write in a closed issue, but other people like me may be still searching for the answer.
I solved it like follows:

• Using this style as @theoryfarm pointed out:

.react-bootstrap-table table {
  table-layout: auto;
}

• then setting the table like this:

<BootstrapTable
    keyField='id'
    data={tableData}
    columns={columns}
    pagination={paginationFactory()}
    striped
    bordered={false}
    wrapperClasses="table-responsive" // This is the style provided by bootstrap 4, this will set the parent div with that class
/>

I hope it helps.

[marciogaleno]

@hielfx, thanks! This worked for me, but I had to add the "react-device-detect" to detect the device and then add the style.

• Import react-device-detect

import {isMobile} from 'react-device-detect';

• Check if a mobile device then add the style

if (isMobile) { require('../custom-styles/custom.css'); }

• Content file custom.css:

.react-inicialização-table mesa { table-layout : auto ; }

• Component:

<BootstrapTable keyField='id' data={data} columns={columns} pagination={paginationFactory()} wrapperClasses="table-responsive" />