[Responsive] Hide row child lis based on empty data

[Responsive] Hide row child lis based on empty data

brownbeardbrownbeard Posts: 2Questions: 1Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

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

    Colin

  • brownbeardbrownbeard Posts: 2Questions: 1Answers: 0

    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;
                    }
                }
            }
    
  • jeremysawesomejeremysawesome Posts: 5Questions: 3Answers: 0

    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))
            }
        }
    }
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

This discussion has been closed.