Align fixedHeader with table?

pain19

I was finally able to get the fixedHeader code working for my app which uses tabs--each one having it's own table. I've only tested with (2) tabs out of the batch, but if it works correctly with (2) tabs it should be able to work with the rest.

Instead of defining fixedHeader on the table itself, I use the following initialization:
new $.fn.dataTable.FixedHeader(table1, { header: true, alwayCloneTop: true });

The I track when the tab selection changes and based on which tab is selected, I do the enable/disable mechanism as seen in this code example I found elsewhere in the forum: https://jsfiddle.net/qamn26zp/14/

This example is basically what I am doing. My only issue is that the fixedHeader is set slightly left of the table. I thought using adjust() would resolve but it doesn't. I thought headerOffset would help, but it does something different than what I hoped for.

Anyway, let me know if this should be handled in css or if I am just missing a property, etc. Thanks in advance!

pain19

I notice that if I define fixedHeader within the table definition it seems to know the tables dimensions and thus, the fixedHeader shows correctly.

It seems like defining it after the table has been initialized that it is now aware of the table's dimensions. If I am right, how to I get the constructor to correctly use the dimensions of the table?

pain19

This screenshot shows my issue.

If possible, I would love it if I could turn on the fixedHeader in each table's definition and then when each table shows, it uses the correct fixedHeader, but I have not been able to get that to work. It seems that in order to get it to work, I must attach the fixedHeaders post-table initialization and then toggle between them. Otherwise, the fixedHeaders overwrite each other.

pain19

Never mind--I found a post where @allan helped someone here: https://datatables.net/forums/discussion/50988/fixedheader-in-boostrap-tabs-appears-broken

He recommended doing the following.
$($.fn.dataTable.tables()).DataTable().fixedHeader.adjust();

So I have "EXACTLY" what I wanted! I turn on fixedHeader when the tables are initialized and then I track the tab selection and when the tab changes, I use the the above line of code and that seems to get the desired results!

@allan you totally KICK ASS my man!

pain19

@allan quick question for you---the first (2) columns of all of my tables are:
* Row (1) checkbox for row selection
* Row (2) icon for show/hide child row (or additional details)

Since these are small columns, I used the following columnDefs to ensure they're always the same size:

"columnDefs": [ { "width": '50px', "targets": 2 }, { "width": '5px', "targets": [0,1] } ],
However, with fixedHeaders turned on, once I scroll back to the top, these (2) columns lose their definition. Is there a way to ensure columnDefs are maintained that I am missing? Thanks in advance.

pain19

Never mind @allan, the issue was autoWidth. I had it set to false thinking that was correct but when I removed the line completely, things started working correctly.

colin

Thanks for reporting back, glad all sorted,

Colin

pain19

@Colin quick question and again, my apologies for not doing a test case but I cannot replicate my issue outside of my app so I know I'm just missing something and hoping you can give me a clue.

Again, I have multiple tabs, each one with its own DT. Recently turned on fixedHeader and working through issues---almost done. What I am seeing now is what others have seen, but I'll describe my situation.

On all tables, I define my column widths (see code above), autoWidth = false. Scroll the table to see the fixed header, but when I scroll back up, the table's columns change for the first (3) columns. I can fixed this by setting autoWidth = true and the table works as expected.

However, I have to load the page on that tab for that solution to work. If I load the page with another tab showing and then navigate to the tab I'm testing with, it doesn't use the defined column widths, even though they are still set.

I thinking I need to either set autoWidth = false and find the proper location to put columns.adjust(). But curious as to why if I set autoWidth to true and load the page from another tab why it's not using the defined column widths.

For clarity, if I do not define column widths at all, the fixed header matches perfectly and does not break when scrolling so I'm certain my columns.adjust() is not in the right place in my code.

I'll keep digging but sometimes it helps me when someone says, "did you check this" after looking at the code for so long. Lol.

I'll keep digging in the mean time. Thanks in advance!

kthorngren

The reason and place to use things like columns.adjust() are described in this example. Basically, when the hidden table is shown Datatables needs to be told to recalculate the column widths.

Also make sure you have style="width:100%" defined on your table tag as shown in this example.

Kevin

pain19

@kthorngren yep, I have everything setup correctly as the examples describe, but not yielding the desired results--hence my confusion. Lol.

No worries, I will keep investigating--the answer is out here somewhere. Thx!

kthorngren

Can you post a test case so we can take a look? You can use Javascript data in place of ajax data like this example:
https://datatables.net/examples/data_sources/js_array.html

Kevin

kthorngren

I built a basic test case with BS3, FixedHeader and two tabs based on the BS with tabs example](https://datatables.net/examples/api/tabs_and_scrolling.html). It has two columns with checkboxes and columns.width set for both. It seems to work when changing tabs. Can you update the test case to show the issue you are having?

http://live.datatables.net/cusetibe/1/edit

Kevin

pain19

Sorry for the delay, I was actually constructing a test case. I'll update yours and see if I can replicate the issue. But so far, I've had issues replicating outside of my app. Stay tuned. And thanks again for the assistance.

pain19

@kthorngren can't replicate it. Would it be possible to show you? I can give you a link and temp account to my dev environment or even do a zoom with you. I think there's just too much code to put into the forum and follow along. If not, no worries, I'll keep moving along and use your test case as an example.

Worth noting, I am using Atlassian's template and it uses AUI 9.4 right now. I mentioned this because my tables are setup using class="display" but when I tried to update to what you have "table, table-striped, etc" it didn't draw my table correctly.

Again, no worries as I eventually figure things out and I know doing something out of the ordinary is time consuming---especially when I'm not paying for it.

kthorngren

update to what you have "table, table-striped, etc" it didn't draw my table correctly.>

There are Bootstrap specific classes. Sounds like you are using the default Datatables styling. Which is fine. Something in the AUI might be clashing with Datatables.

Would it be possible to show you? I can give you a link and temp account to my dev environment

You can work with the developers, @allan or @colin, for this. Just send a PM to them with access details. Click Ask a Private Question at the top of the page.

Kevin

pain19

The short description is I set columnDefs on the first (3) columns, set autoWidth to false, set fixedHeader to true. Table initializes ok, scroll down and then back up and the first (3) columns change their width.

If I don't set the columnDefs and just allow the table to draw itself, the fixedHeader works just fine--but who wants a huge cell that contains a simple checkbox.

Finally, if I leave everything the same and set autoWidth to true, fixed header works fine. But if I'm on another tab when the page loads and then switch to the tab I'm testing with, then none of the columnDefs are used.

I'm going to try setting width for all columns and see if that helps. But I'm sure I have a mis-match of code somewhere and I just need to find it.

pain19

@kthorngren made progress so thought I would send a quick update.

First, I converted everything to BS5 away from AUI. Looks slick and I may convert the entire app one day soon. However, I got the exact same results--even while using your code as a guide.

However, what I was able to determine is that its the first (3) columns that are causing my grief. When turned off (using ColVis) the fixedHeader worked perfectly--even with the original code. So I need to figure out what going on in those columns that is cause the problem.

Just for clarification sake:

1. Col #1 is a checkbox
2. Col #2 is an icon (plus/minus) to expose/hide the detail/child row.
3. Col #3 is the row number so when you sort, the row number doesn't get jumbled.

All of which I used examples from DT to implement, so hopefully there's an answer to my issue(s) in the forums some place. Will keep you posted--hoping I can use your test case to see if I can break it with what I've implemented. Lol.