Fixed Header show also if Table is hidden

[TomTheRock]

If you use the table in a tab (bootstrap) or Hide the datatable, the fixedheader shows when you scrolling...

[DataTables]

You need to tell DataTables that the table has been hidden and disable the FixedHeader using [fixedHeader.enable()](https://datatables.net/reference/api/fixedHeader.enable()) and [fixedHeader.disable()](https://datatables.net/reference/api/fixedHeader.disable()).

In future, can you post support requests in the forums as requested in the new issue template please.

[daattali]

@DataTables thanks for the great library, including the useful FixedHeader extension. I 100% support filing support requests/questions in a more appropriate forum. However, this does seem like a bug, or at least a feature request, to me.

Placing a table inside a tab and then switching to a different tab, you would not expect parts of the table to show up when you're on a different tab. Asking the user to manually hide the header when a tab is switched doesn't seem like a solution to the problem to me.

[DataTables]

The issue is that DataTables doesn't watch the DOM to determine if a container element has been shown or hidden, so it needs to know when to update the display. If it supported a specific tab library then yes, I could listen for its events, but I don't want to tie it to a specific library - indeed, normally when I want tabs I just write my own since they are fairly easy to do.

If you have a suggestion for how this can be implemented then I'm all ears, but I've not yet found a better way that having the developer calling the API method based on what their UI is doing.

[0x11DFE]

The issue is that DataTables doesn't watch the DOM to determine if a container element has been shown or hidden, so it needs to know when to update the display. If it supported a specific tab library then yes, I could listen for its events, but I don't want to tie it to a specific library - indeed, normally when I want tabs I just write my own since they are fairly easy to do.

If you have a suggestion for how this can be implemented then I'm all ears, but I've not yet found a better way that having the developer calling the API method based on what their UI is doing.

Any fix yet? I am really going insane with this issue :')

The way i am doing the things now is by setting the column().visible() to false then back to true once the element is visible. Would be cool to get an update where i can set to it to not ignore non-visible elements.

[AllanJard]

You should be able to [call fixedHeader.adjust()](https://datatables.net/reference/api/fixedHeader.adjust()) whenever the DOM changes. It will automatically enable or disable depending on if it is hidden or not. If that isn't working for you, please link to a test case showing the issue.

[0x11DFE]

You should be able to [call fixedHeader.adjust()](https://datatables.net/reference/api/fixedHeader.adjust()) whenever the DOM changes. It will automatically enable or disable depending on if it is hidden or not. If that isn't working for you, please link to a test case showing the issue.

It doesn't work, I basically have x2 cards one is completly hidden at start. Now triggering fixedHeader.adjust() for some reason does not do anything. Should i call it on DataTable() or on a column?

[AllanJard]

I'll need a link to a test case showing the issue to be able to offer any help.

[0x11DFE]

I'll need a link to a test case showing the issue to be able to offer any help.

Setup your own using bootstrap's Navs and tabs Then put and load your datatable inside an inactive nav card.

[daattali]

@0x11DFE If you can provide a reproducible code sample either as a code snippet or as a link to something like https://codepen.io/ then I'm sure the devs will be 100x more likely to take a look and try to help. I highly doubt they'll take the time to create a test case that's described in English prose.

[0x11DFE]

@0x11DFE If you can provide a reproducible code sample either as a code snippet or as a link to something like https://codepen.io/ then I'm sure the devs will be 100x more likely to take a look and try to help. I highly doubt they'll take the time to create a test case that's described in English prose.

Tried to replicate it but somehow it doesn't work at all this time. https://codepen.io/0x11dfe/pen/VwWjowK

[AllanJard]

Do you mean that it is working as expected and you can't reproduce the error in the test case? I don't see any calls to column().visible() in your code, nor is there a call to fixedHeader.adjust() when the tabs are made visible.

[0x11DFE]

Do you mean that it is working as expected and you can't reproduce the error in the test case? I don't see any calls to column().visible() in your code, nor is there a call to fixedHeader.adjust() when the tabs are made visible.

Yes because for some reason i was not able to replicate a working scenario at all. The fixedHeader option does not seem to work at all when i resize the card. Now if you are able to fix that and try to move into another nav-tab the table should not be responsive as when initialized it was not visible.

[AllanJard]

The fixed header appears to be working for me in your example?

[0x11DFE]

The fixed header appears to be working for me in your example?

Isn't it supposed to be to resizing responsively?

[AllanJard]

You need to tell DataTables / Responsive that there ha been a resize action. You can do that with a MutationObserver:

function resize () {
  $.fn.dataTable.tables( {visible: true, api: true} )
    .columns.adjust()
    .fixedHeader.adjust();
}

let observer = new MutationObserver(function(mutations) {
  resize();
});
document.querySelectorAll('div.card').forEach( function (el) {
  observer.observe(el, { attributes: true });
});

$('button[data-bs-toggle="tab"]').on( 'shown.bs.tab', resize );

Note that FixedHeader will not operate inside a scrolling container. It works at the page level, not a scrolling container.

[0x11DFE]

You need to tell DataTables / Responsive that there ha been a resize action. You can do that with a MutationObserver:

function resize () {
  $.fn.dataTable.tables( {visible: true, api: true} )
    .columns.adjust()
    .fixedHeader.adjust();
}

let observer = new MutationObserver(function(mutations) {
  resize();
});
document.querySelectorAll('div.card').forEach( function (el) {
  observer.observe(el, { attributes: true });
});

$('button[data-bs-toggle="tab"]').on( 'shown.bs.tab', resize );

Note that FixedHeader will not operate inside a scrolling container. It works at the page level, not a scrolling container.

I didn't know about the MutationObserver its quite a nice trick. Thanks.