Bootstrap 5 with Responsive DataTables is not working

jeranU

Link to test case: https://jsfiddle.net/yv0ug13j/5/
Debugger code (debug.datatables.net): evugat
Error messages shown: none
Description of problem: I have detailed the issues in the test case, but the core of the issue seems to be that bootstrap 5 is not correctly merging with the datatables responsive configuration. Key Issues:

1. The key parts seem to be the .table-responsive class and the autowidth: false option.
2. Any redraw is showing the expand indicator incorrectly.
   when toggling the table responsive class and the auto width property, it appears to either not redraw the table as you resize, or it adds a bunch of empty extra space at the end of the container, decreasing the size of the table.

Any help with this would be greatlly appreciated

jeranU

Other Discussions I referenced in this issue:
https://datatables.net/forums/discussion/78334/datatables-2-0-responsive-and-bs5-not-working
https://www.gyrocode.com/articles/jquery-datatables-column-width-issues-with-bootstrap-tabs/#example2
https://stackoverflow.com/questions/17237812/datatable-jquery-table-header-width-not-aligned-with-body-width/46160726

allan

table-responsive is a Bootstrap class that should do on a div container not the table (see the Bootstrap docs.

That is a different solution for wide tables from my Responsive extension for DataTables. The two are mutually exclusive and cannot be used together. (table-responsive makes the containing element scrolling, whereas Responsive will avoid scrolling by removing columns).

Use one approach or the other, not both.

Allan

jeranU

I updated my example as you suggested with the table-responsive in a div, here is the updated jsfiddle: https://jsfiddle.net/an985x3j/

As you can see, on either side of those examples, I am still having the problems (Also, the 3rd and 4th example are not using the table-responsive class at all and have the same problems)

allan

Ah - I hadn't clicked that you were destroying the table on the "Draw" button press. There is indeed a bug in 2.1.6 (and earlier) that causes the effect you are seeing. I committed a fix for that last week, and it will be in the 2.1.7 release that I plan to make tomorrow.

With the nightly version your examples work okay.

Allan