[Responsive] Hide row child lis based on empty data

brownbeard

Hello!

I've been trying to figure out how I can make it so that whenever there is an empty cell, the responsive row item (when expanded) does not show that individual column and value for that row.

The image below will show what i'm trying to achieve. It's based on the homepage example and in this case Angelica Ramos does not have a Salary data point, is NULL or NONE.

Any thoughts?

colin

You would need to create your own renderer with responsive.details.renderer - see example here,

Colin

brownbeard

Great, thank you.

This is what I came up with and it does the trick.

        responsive: {
            details: {
                renderer: function ( api, rowIdx, columns ) {
                    var data = $.map( columns, function ( col, i ) {
                        if (col.hidden && col.data != '') {
                            console.log(col);
                            console.log(col.data);
                            return '<tr class="res-child" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                                '<td>'+col.title+':'+'</td> '+
                                '<td>'+col.data+'</td>'+
                            '</tr>';
                        } else {
                            return '';
                        }
                    } ).join('');

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

jeremysawesome

I wanted to take a moment and add to this. It's possible to filter the columns the way you want before passing them onto one of the built in renderers.

responsive: {
    details: {
        renderer: function(api, rowIdx, columns){
            let render_method = $.fn.dataTable.Responsive.renderer.tableAll()
            return render_method(api, rowIdx, columns.filter(column => column.hidden && column.data))
        }
    }
}

colin

Nice, that's a tidy way of doing it,

Colin