How can I add another child to a responsive datatable

Question

How can I add another(two) child(ren) to a responsive datatable.

If the table is too narrow and I click the + button this does nothing

Any thoughts on this?

function format ( d ) {
    return '<div class="player"></div>';
}

https://jsfiddle.net/v1xnj3u4/

Answer 1

This seems to work though it doesn't create another row as such but just adds to the created row the div you specified:

"responsive": {
    "details": {
        "renderer": function ( api, rowIdx ) {
            // Select hidden columns for the given row
            var data = api.cells(rowIdx, ':hidden').eq(0).map(function(cell){
                var header = $(api.column(cell.column).header());
                return $("<tr></tr>").append($("<td></td>",{
                    "text": header.text()+':'
                })).append($("<td></td>",{
                    "text": api.cell( cell ).data()
                })).prop('outerHTML');
            }).toArray().join('');
            return data ?
                $('<table/>').append( data ).prop('outerHTML') + $("<div></div>", {"class":"player"}).prop('outerHTML') :
                false;
        }
    }
},

Working example on JSFiddle , thanks for the challenge, I enjoyed learning about that ;-)

Answer 2

You can make (+) icon stay all the time if you make one of the columns hidden, you can create a dummy column for that purpose and use one of the Responsive plugin special classes none as 'className: 'none' for that dummy column.

In the example below I used last column for that purpose because in the row details it will also be displayed last.

Then when enumerating the columns in custom renderer you can display what you want for that column if that special column header matches some predetermined value (I used 'Extra 10' which is the header of the last column).

See this JSFiddle for demonstration.

PS: I used excellent answer and example by @annoyingmouse as a base for this answer so my vote goes to him as well.