Is it possible to have the row details in DataTables show data below but aligned with the parent columns? I notice that when I use row details with row.child( format(row.data()) ).show(); this will create another <tr> but then it will also add a <td colspan> which I do not want to happen.

This is the row created when using row.child():

<tr><td colspan="17"><tr><td></td><td></td><td>January 12, 2016</td><td>Clientname</td><td>Projectname</td><td>Taskname</td></tr></td></tr>

I also attached a picture below to show that I would like January 12, 2016 to line up with the parent Date column, the Clientname lined up with parent Client column and so on....

Anyone know a way to do this?

Here is my current code for row details:

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }

function format ( d ) {
    // `d` is the original data object for the row
        return  '<tr>'+
                            '<td></td>'+
                            '<td></td>'+
                            '<td>January 12, 2016</td>'+
                            '<td>Clientname</td>'+
                            '<td>Projectname</td>'+
                            '<td>Taskname</td>'+
                        '</tr>';
    }

Is it possible to have the row details in DataTables show data below but aligned with the parent columns? I notice that when I use row details with row.child( format(row.data()) ).show(); this will create another <tr> but then it will also add a <td colspan> which I do not want to happen.

This is the row created when using row.child():

<tr><td colspan="17"><tr><td></td><td></td><td>January 12, 2016</td><td>Clientname</td><td>Projectname</td><td>Taskname</td></tr></td></tr>

I also attached a picture below to show that I would like January 12, 2016 to line up with the parent Date column, the Clientname lined up with parent Client column and so on....

Anyone know a way to do this?

Here is my current code for row details:

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }

function format ( d ) {
    // `d` is the original data object for the row
        return  '<tr>'+
                            '<td></td>'+
                            '<td></td>'+
                            '<td>January 12, 2016</td>'+
                            '<td>Clientname</td>'+
                            '<td>Projectname</td>'+
                            '<td>Taskname</td>'+
                        '</tr>';
    }

• javascript
• jquery
• datatables
• datatables-1.10

3 Answers 3

My approach to this was to:

1. Create a temporary table row:

   tmpRow = table.row.add(data).draw().node();

2. Clone the temporary row's node:

   childNode = $(tmpRow).clone(true);

3. Show child using the cloned node:

   row.child(childNode).show();

4. Remove the temporary table row:

   table.row(tmpRow).remove().draw();

Pros:

• Uses table column definitions
• No extra HTML code (i.e. format())
• Minimal code
• Clean, no hacks

Cons:

• Table has to redraw the temporary node in order to get a domNode to pass to the child
• User may experience a "flash" of seeing the temporary row for a second (and pagination counts)

It's clean and it works and you can mitigate the caveats with some CSS.

Here is the full solution with documentation walk-through:

/**
 * @description
 * Expands the parent row and reveals the child row.
 * In this example, data is simply copied from the parent row 
 * for illustration purposes, but in reality can be retrieved 
 * from a promise or nested object key.
 *
 * @param {event} row onclick event
 * @return {void}
 */
expandRow = function (e) {
    const data = e.data, // customize or load data from AJAX
        table = $('#myDatatable').DataTable(),
        tr = $(e.target).closest('tr'),
        row = table.row(tr);

    /**
     * @description
     * Hide the parent row
     */
    if ( row.child.isShown() ) {
        $(tr).removeClass('shown');
        row.child.hide();
    }
    /**
     * @description
     * Show the parent row
     */
    else {
        /**
         * @description
         * Draw a new row `tmpRow` in the table
         * and clone its dom node
         */
        const tmpRow = table.row.add(data).draw().node(),
            childNode = $(tmpRow).clone(true);

        /**
         * @description
         * Append the child to the parent row
         */
        row.child(childNode).show();
        $(tr).addClass('shown');

        /**
         * @description
         * Remove the `tmpRow` from the table
         */
        table.row(tmpRow).remove().draw();
    }

};

Though I'm not sure how to make the columns line up the DataTables website does have an example of this. They make the child row bee several rows with the column headers as the first column. The example is here. Since it looks like there are only a few column in your parent row this might work for you. The DataTables example only shows 3 rows as the children, but it would be easily modified to have all 4 columns that you show in the question.

I had the same problem some time ago but after couple of years I see there is still no correct answer here.

Just create table row with the same amount of table cells as the parent row and return as an "array" - see below:

function format(d) {
    var childRow = '<tr>' +
            '<td></td>' +
            '<td></td>' +
            '<td>January 12, 2016</td>' +
            '<td>Clientname</td>' +
            '<td>Projectname</td>' +
            '<td>Taskname</td>' +
            '</tr>';
    return $(childRow).toArray();
}