FixedHeader Extension Not Working in Bootstrap 5 Modal - Need Assistance

BrightGear

Hello DataTables Community,

I am currently working on a project that uses DataTables. I have encountered an issue while trying to implement the FixedHeader extension of DataTables within a Bootstrap 5 modal.

The problem I am facing is that the FixedHeader does not seem to work as expected within the modal. I have tried several approaches to resolve this issue, but none have been successful so far.

Here is a link to a test case that replicates the issue

In this test case, you will see that I have a Bootstrap 5 modal containing a table that uses DataTables. I have applied the FixedHeader extension to the table, but the header does not remain fixed when scrolling.

I would appreciate any guidance or suggestions on how to resolve this issue. Is there a workaround or a specific way to implement the FixedHeader extension within a Bootstrap modal?

Thank you in advance for your time and assistance.

Best Regards,
Sasha

kthorngren

Thanks for the test case! I tried adding fixedHeader.adjust() when the shown.bs.modal fires but it still doesn't work.
https://live.datatables.net/qokatiqa/3/edit

@allan will need to take a look.

Kevin

BrightGear

Thank you for the prompt reply, Kevin!

Yeah, fixedHeader.adjust() was among the things I tried with no luck

allan

Ah, the problem is that the DataTables is inside a scrolling container. FixedHeader currently only works when it is the document (i.e. the whole window) that is scrolling, or when DataTables scrolling is enabled.

Adding the ability to have it either automatically detect scrolling parent containers (worried about performance), or to be able to specify a selector for the scrolling parent, is something that is on my todo list (its been there for too long already...).

For this sort of use case, I'd be tempted to use scrollY, which you can set to be a dynamic height - e.g.:

scrollY: 'calc(100vh - 425px)'

https://live.datatables.net/qokatiqa/7/edit

Then there is no need for FixedHeaders.

Allan

BrightGear

Thank you Allan, for the assistance and explanation! Now that is clear why I couldn't make it working

Hopefully, you will be able to implement that feature with the ability to specify selector for the scrolling parent sometime in the future
There a lot on your plate, and I understand that item probably not top priority in your quite long todo list