When the childrow is shown, the relationship between the table header and the columns is destroyed

PCCFR

Hi, my first question after using datatables since 2016, so far i have been able to solve all problems myself, but not this time. When the table width in the childrow is smaler than the parent table width, there is no problem, but when the width of the datatable in the child row is larger than the parent table width, the columns and the header of the parent are stretched and the relationship between columns and header will be destroyed. Resize the Browser will fix it, but table.columns.adjust().draw() after initComplete of the child table does not. What can i do to solve the problem? It would be correct if the parent keeps its width and the childtable has a scrollbar for overflow-x or both tables resize correct incl. header.

Thanks and regards

PCCFR

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

PCCFR

Hi colin,
I was able to solve the problem myself, I did the adjust after the childRow event, which was obviously too early. Now the adjust is only applied to the parent table after the draw event of the child table. The headers are now correctly scaled.

Trevor_Attwood

I'm having a similar problem with the Datatables column headers becoming misaligned when child rows are being displayed. In my case, I was using a fixed height vertical scrolling "scroller" type table with only a few records. Note the number of records should be small so a vertical scroll bar has not appeared. Now, when the button to open child rows is pressed, it increases the height of the table beyond its fixed table height. This causes a vertical scroll bar to appear. The appearance of this vertical scroll bar breaks the alignment between the table data columns and the header columns.

As a test to solve this problem, I tried attaching an event to the table using the following JavaScript;
$(my_table).on('childRow.dt', function (e, show, row) {
$(my_table).DataTable().columns.adjust();
}

This worked when pressing the button to open a child row (i.e. the event triggers, thus calling the DataTable().columns.adjust(). However, when pressing the child row button again, the event was not triggered. It seems the event is only triggered when opening child rows, but not closing them. This is in contrast to the "childRow" event documentation which says, quote: "The childRow is triggered whenever a child row is inserted or removed from the table."
Thus, I assume there may be a bug somewhere.

(On a side note: I tried the above code in a "non-scroller" type table, but it requires the line;
$(my_table).DataTable().columns.adjust().draw();
...instead. However, I discovered the ".draw()" line triggered the code which I attached to the "childRow.dt'" child row event again, causing an infinite loop until eventually causing a JavaScript stack overflow).

kthorngren

@Trevor_Attwood

It seems the event is only triggered when opening child rows, but not closing them. This is in contrast to the "childRow" event documentation which says, quote: "The childRow is triggered whenever a child row is inserted or removed from the table."
Thus, I assume there may be a bug somewhere.

Are you using row().child.hide() or row().child.remove() when closing the child row? I suspect using row().child.remove() will fire the event.

Kevin

Trevor_Attwood

Hi Kevin,
Thanks for the response.

I'm not using row().child.hide() or .remove(). My table and all its data is created entirely within html (plus a bit of JavaScript to init the Datatable), and I just use html classes to mark which table columns are treated as child rows.

For example, to create the table, I set the attributes in html as;

data-scroll-Y="300" data-paging="true" data-scroll-X="true" data-scroller="true"

The table also has the class "responsive".

Then, for the 'th' table elements, I apply the classes "control all" to the first column which will contain the child row button (the "+" in a blue circle icon, which is generated after calling the Datatables JS initialization function). Then, for the majority of table column 'th' elements, I apply the class "all". But for the columns to appear as child rows, I add the class "none".

(Edited:)
In JavaScript, I attach an event to the "childRow" to call the header alignment adjust() function, i.e.

$("#my_table").on('childRow.dt', function (e, show, row) { $(#my_table).DataTable().columns.adjust();
});

Then for my JavaScript initialization, i just use;
$("#my_table).DataTable({});

This fix to correct misaligned headers seems to work fine when opening a child row (i.e. pressing the "+" button). But when closing the child row (pressing the red "-" button), the event is not triggered.

kthorngren

@Trevor_Attwood

I thought you were using Child Row Details which I believe is what the childRow event is intended for. With Responsive you will want to use responsive-display instead.

Kevin

Trevor_Attwood

Thanks Kevin! I'll give that a try.
(I was trying to edit my second comment to add more info, but upon saving, it seems to have vanished!)

Trevor_Attwood

Yes, that solved my problem! Thank you Kevin!

On a side note, I looked at the link you provided for "responsive-display", and copied its example code, i.e.

table.on( 'responsive-display', function ( e, datatable, row, showHide, update )

Initially, it didn't work. Then I read the top part of the description, and it said "Please note that, as with all DataTables emitted events, this event is triggered with the dt namespace. As such, to listen for this event, you must also use the dt namespace by simply appending .dt to your event name, [...]"

So I changed the line to include the .dt namespace, i.e.;

table.on( 'responsive-display.dt', function ( e, datatable, row, showHide, update )

...and it now works. So, is the example for the "responsive-display" incorrect, such that it is missing the .dt namespace?

colin

Sorry, Trevor, your reply got caught in the spam filter.

The ".dt" namespace should be used as in some cases it is definitely needed. We tend to drop it in the simple test cases as there it isn't.

Colin