React-bootstrap-table2: Support bootstrap 4

[chunming-c]

Hi @AllenFang:

I'm trying to support bootstrap 4 and I'll take a look on how it was implemented in react-bootstrap-table. It would be take refer to but won't be the same. If there's any concern or advices, please let me know. Thanks a lot :)

[AllenFang]

@Chun-MingChen goooood, in current design, take the sorting symbol, pagination, and filter. as I know there're no too many change for bootstrap 3 and 4.

[chunming-c]

@AllenFang

Ok got it. Currently I'm trying to come up with a new way to not use a flag as react-bootstrap-table did. Unless there's no better solution, I will pick up the same way.

const isBootstrap4 = Util.isBootstrap4(this.props.version);

[AllenFang]

@Chun-MingChen sure, that's a good idea!!

[coommark]

Hello @Chun-MingChen, good job! Please what is the status of this? Can we start using Bootstrap 4?

[AllenFang]

@coommark it does need some time, we will support it ASAP, thanks!!

[ssorallen]

I've been using react-bootstrap-table2 with Bootstrap 4.1.1, and so far the only thing I've needed to add is the caret. This is the CSS I added to my project so far:

/* Caret from Bootstrap 3 */
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.dropup .caret {
  border-bottom: 4px dashed;
  border-top: 0;
  content: '';
}

/* Prevent excessive margin from react-table from increasing the height of the
 * `<thead>`.
 */
.react-bootstrap-table th > .react-bootstrap-table-sort-order > .caret,
.react-bootstrap-table th .order > .dropdown > .caret,
.react-bootstrap-table th .order > .dropup > .caret {
  margin-bottom: 0;
  margin-top: 0;
}

Thanks for all the work on this project. The table works great!

[ssorallen]

Also the table-condensed class changed to table-sm. The condensed prop for ReactBootstrapTable2 adds the incorrect class name right now and has no effect. You can get around it by using classes="table-sm" right now.

[coommark]

Hello @ssorallen Thank you for this! Yes actually I have started using the tables on the latest Bootstrap 4, and yes, the only issue I have is the caret. I guess with this code I can finally make everything alright.

Thank you lots!

[kurt-o-sys]

just wondering (since I'm about to finish a project, and I'm still doubting if I should revert to the react-bootstrap-table or not): any ETA for bootstrap4 support?

[AllenFang]

@kurt-o-sys I think before July or middle of June :)

[kurt-o-sys]

:+1:

[mattrei]

see also #321

[nthgol]

thanks @ssorallen

[jrotoni]

Works like a charm! Thank you so much @ssorallen and thank you too @AllenFang

[ynijs]

Any update on the move to BS4? I'm still facing issues with the pagination component that is causing an overflow and thus a horizontal scrollbar. I could fix the pagination dropdown with a fix mentioned here on the forums.

[AllenFang]

Support from [email protected]: https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/bootstrap4.html