RESPONSIVE Datatables - change design of hidden area (child area)

antonis80

Hi

I am using this code:

$('#example').DataTable( {
    responsive: {
        details: {
            renderer: function ( api, rowIdx, columns ) {
                var data = $.map( columns, function ( col, i ) {
                    return col.hidden ?
                        '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                            '<td>'+col.title+':'+'</td> '+
                            '<td>'+col.data+'</td>'+
                        '</tr>' :
                        '';
                } ).join('');
 
                return data ?
                    $('<table/>').append( data ) :
                    false;
            }
        }
    }
} ); 

To create a table of the child area, However i need a table that will display all column headings in a single row and then on another row the data.

Is this possible?

Thanks in advance

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Hi @antonis80 ,

That's possible, you just need to add another <tr> element into the returned data.

Cheers,

Colin

antonis80

Thanks Colin,

I did it with the following:

responsive: {
details: {
renderer: function ( api, rowIdx, columns ) {

                                                                                var data = '<div style="display: flex;flex-wrap: wrap;font-size: 0.9em;justify-content: center;">' + $.map( columns, function ( col, i ) {
                                                                                    //alert(col.data);
                                                                                    return col.hidden ?
                                                                                            '<div style="width: 30%;margin: 5px; font-size: 0.9em;text-align: left;height: auto;background-color: #fcfcfc; padding: 0 5px;color:#000; "><span style="display: inline-block;font-weight: bold; width:40%;">'+col.title+':</span> '+col.data+'</div>'+
                                                                                        '' :
                                                                                        '';
                                                                                } ).join('');

                                                                                return data+'</div>' ?
                                                                                    $('<table/>').append( data ) :
                                                                                    false;
                                                                            }
                                                                        }
                                                                    },