Column Headers move to left when using tabs and ScrollX

MadBoyEvo · February 2021

Link to test case:
- Works -> https://codepen.io/MadBoyEvo/pen/dyOoQLY
- Doesn't work -> https://codepen.io/MadBoyEvo/pen/zYoGeow

The code is basically the same with the difference that one uses ScrollX, the other one is using responsive.

I use this function to resize responsive on tab switch

        function resizeTable(table) {
                    if ($.fn.DataTable.isDataTable("#" + table.id)) {
                        $("#" + table.id).DataTable().columns.adjust().responsive.recalc();
                    }
                }

Of course it doesn't work on scrollx and it basically errors out on if ($.fn.DataTable.isDataTable("#" + table.id)) {. But whether it errors out or if I remove the code the headers on "next tab" move to the left from center position.

Is there something similar to recalc but for ScrollX? Or how I could deal with this situation?
How can I detect it's responsive vs scroll x is used?

kthorngren · February 2021

When your resizeTable() function is called there are two tables, the first doesn't have an id which is causing this error:

Uncaught Error: Syntax error, unrecognized expression: #

Here is the output if you add a console.log(table.id);` statement:

table id: 
<table width="100%" class="dataTables display compact dataTable no-footer" role="grid" style="margin-left: 0px; width: 1151px;">…</table>

table id: DT-FTykmyRX
<table width="100%" id="DT-FTykmyRX" class="dataTables display compact dataTable no-footer" role="grid" aria-describedby="DT-FTykmyRX_info" style="width: 100%;">…</table>

Is there something similar to recalc but for ScrollX? Or how I could deal with this situation?

Use columns.adjust().

How can I detect it's responsive vs scroll x is used?

I don't believe there are any API's etc for this. You could dig directly into the settings but this is not recommended as they may change. I would just use a try/catch statement. I changed your example to look like this and it seems to work:

                function resizeTable(table) {
                  console.log('table id:', table.id);
                     if (table.id && $.fn.DataTable.isDataTable("#" + table.id)) {
                    console.log(table);
                  try {
                    $("#" + table.id).DataTable().columns.adjust().responsive.recalc();
                  }
                  catch { 
                    $("#" + table.id).DataTable().columns.adjust();
                  }
                 }

                }

Unfortunately I don't have a way to save the changes.

Kevin

MadBoyEvo · February 2021

Thank you. Seems to work. I've not noticed that for some reason I find all tables on the page, rather the ones on tab only.

  findObjectsToRedraw(tab.id + "-Content");

 var table = document.getElementById(id).querySelectorAll('table.dataTables');

So it seems the document.getElementByid(tab.id + "-content").QuerySelector gives me more than what I wanted...

MadBoyEvo · February 2021

It's weird, because it passes table two times only when scrollX is used. it doesn't happen when it's responsive. Any idea why would that happen?

kthorngren · February 2021

The scrollX, and some other options/extension, clones the header. If you inspect the HTML you will see two tables. See the last comment from Allan in this thread.

Kevin

MadBoyEvo · February 2021

Thank you! Really appreciate your insight!

Column Headers move to left when using tabs and ScrollX

Column Headers move to left when using tabs and ScrollX

Answers

Howdy, Stranger!

Categories

DataTables

Column Headers move to left when using tabs and ScrollX

Column Headers move to left when using tabs and ScrollX

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables