Datatables with Bootstrap 5 - Table headers misaligned when in modal

sovap

Link to test case: https://live.datatables.net/yexadosi/1/

Description of problem:

When all the data in both columns and both tables is the same size then there is no issue.
But in case some values are longer then the headers will not be sized correctly as displayed in the attached picture.
After some action like for example when user uses the search feature, headers will be fixed automatically.

I already tried some suggested solutions like:
1) columns.adjust()
2) fixedHeader extension
3) css: table-layout: fixed

allan

You need to call columns.adjust() when the model is visible - which is the shown.model.bs event: https://live.datatables.net/nizopala/2/edit .

The plan is to have DataTables 2.2 do this automatically which should also solve that little step change between when the modal is animating in and fully shown.

Allan

kthorngren

This code seems to work:

const myModal = document.getElementById('exampleModal');
myModal.addEventListener('shown.bs.modal', () => {
  DataTable.tables({ visible: true, api: true }).columns.adjust();
});

See the updated test case:

https://live.datatables.net/dikodofa/1/edit

I disabled responsive to show the effect.

Kevin