Creating a Nested Child Row effect through Nested DataTables

mj0seph

Hi Everyone,

I understand that nested child rows are not currently supported, so I’m approximating this effect by embedding DataTables inside child rows as has been suggested here:

https://datatables.net/forums/discussion/comment/143058

I’d like to eventually go four levels deep while aligning child columns with the parent columns responsively. Alignment of columns works great when inserting a child rows just one level deep, as discussed here:

https://datatables.net/forums/discussion/comment/149817

But when inserting a DataTable in a child row, I run into issues with (1) parent-child column alignment and (2) the DataTable in the 2nd-level-child row inserts seemingly randomly in the parent table instead of below the target 1st-level-child row.

Here’s my code so far. Any thoughts on this are much appreciated!

http://live.datatables.net/hijedepe

colin

Hi @mj0seph ,

This thread here should help - it shows how you need to return a node to get the columns aligned.

Could you give that a try and report back if no joy,

Cheers,

Colin

mj0seph

Thanks, @colin. I think I'm getting warmer.

Below is an enhanced 4-tier example (1 parent, three nested children rows). The child rows now appear under the correct respective parent row, however the columns still do not align (see screenshot below). I'm now returning the <table> element from the format function(s) as an array, but it doesn't seem to solve the column alignment issue as it did for <tr> elements in the example you cited.

Any additional thoughts?

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

allan

There are a few ways to approach this:

1. By far the most simple is to use table-layout: fixed and assign a width to each column (a percentage value to make it relative). That way the browser will keep the columns in alignment for you (you are forcing the width). The downsize is that its not reactive to the table's content. You need to plan the sizes in advance, so you need to know what data is likely to be shown (that looks like a fair assumption in this case).
2. The way it is setup shows that each group is its own table, which is way its misaligned - they are having their width calculated based on their own content. You could use Javascript to read the column widths of the parent tables and then apply that to the child tables. That's what DataTables does for scrolling, but that way lies madness (trust me!).
3. Final option is to watch for the draw events and insert them as required into the parent table. That way the rows are all in one table and the browser will automatically keep them in alignment. This is probably the best technical option I would say, but with multiple levels of tables I think it will be quite tricky as well.

Allan

mj0seph

Thanks @allan!
I've tinkered more based on your first suggestion, and come up with a reasonable result:

http://live.datatables.net/mukirowi/5