Expand child rows that actually looks like rows in the table

malmgren

Hi.
I have a table where I need to be able to click a row to reveal belonging child rows below it. I'm following the instructions on https://datatables.net/examples/api/row_details.html which works good. The problem is that the expanded rows gets encapsulated in an extra td tag that I don't want.

Currently my format() function returns the following, just for test:
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>

I want this to appear as a row in my table. What I get out when calling row.child(format(row.data())).show() however is this row:
<tr><td colspan="6"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></td></tr>

ie it puts a td spanning all columns around my row. I can understand this behaviour in some scenarios, but when trying to get the row to look like a "real" row it's a problem. Any way to get around it?

allan

Hi,

Yes, what you need to do is return a tr element with the cells you want in it. This is the relevant part of the DataTables code.

If you have a string of the td elements already, then do:

return $('<tr>').append(tds)[0];

Allan

malmgren

Nope, that doesn't work either. I still get the encapsulating td around my code:
<tr><td colspan="6"><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr></td></tr>

Looking at the code you linked to I really don't understand how this is possible

malmgren

Just for completeness... If I change my code to this:

table.on('click', 'td.dt-control', function (e) {
        let tr = e.target.closest('tr');
        let row = table.row(tr);
        if (row.child.isShown()) {
            row.child.hide();
        } else {
            row.child("<tr><td>test</td></tr>").show();
        }
    });

...and then click to expand the child row, I end up with this in the row:
<tr><td colspan="8"><tr><td>test</td></tr></td></tr>

malmgren

Doh. For some reason it works when I do exactly as you wrote, but not when I put the tr on the same row as the tds? Well, I think that solved it.

Another question: If I need multiple child rows for some of my rows, how do I do that?

allan

not when I put the tr on the same row as the tds?

Not sure without being able to see and debug it. Good to hear my code worked though.

If I need multiple child rows for some of my rows, how do I do that?

An array of tr elements will do it (see a couple of lines up from the link I gave before in the source code).

Allan

malmgren

Great, thanks! Actually solved it just before reading your last comment

Another (hopefully last one) detail I can't seem to get right: I have the button for column visibility (colvis) enabled. If I have child rows expanded and then hide columns it doesn't affect the columns of the child rowd, so their columns get wrong relative to the column headers. Is there any way to solve this?

allan

Yes, you need to re-render your child row on the column-visibility event.

Allan