Details Row + Responsive at Once

c-myers1

I am testing out datatables and had a responsive one with 5 columns + a row id column. When the browser size is reduced, a green plus sign comes up to reveal the automatically hidden fields. This was perfect.

However I also need the functionality of getting details from other tables (related to the main table by the id function so I adapted code at https://datatables.net/examples/api/row_details.html. For simplicity to be sure things work fine, I simplified the format function to be as follows:

function format ( d ) {
    // `d` is the original data object for the row
    return d.summary;
}

i.e its not really doing any ajax fetch yet, it referring to the data already in the browser.

Problem is this is not working as expected. When the screen is wide (i.e. no hidden columns), there is no plus sign but when I click on the first column, it does expand the row to reveal the summary field.

When the browser screen width is reduced, the green + buttons appear but clicking them only changes them to red and the detail row does not show up.

How can this behavior be fixed?

Thanks

allan

By default Responsive uses the child row display to show the hidden information as you are seeing. That means you can't also use it or you'd have a conflict.

To address this, Responsive has multiple display options including a modal display which can be used instead of the child row, allowing both to be used independently.

Allan

c-myers1

Thank you but a modal pop-up does not fit the apps use case. I need to inline both the extra info and the hidden columns somehow. Is there some other elegant solution?

allan

I'm not aware of anyone having done it, but it would be possible to use the responsive.details.renderer option to provide a custom renderer. The renderer would display the hidden information plus whatever information you need in the child row.

You'd also need logic to handle the case for displaying the child row directly through the API (row().child().show()) when it is not in responsive mode and then disabling that interaction when the table is in responsive mode.

Allan

JDMilne

I too was in need of both responsive displaying of columns and details.

My solution is to add a dummy column to the table that is alway hidden due to the 'none' class.

<th class="none">Details:</th>

The column requires a custom renderer, which can return an empty string if you have nothing further to display.

{
     "data": "",
     "render": function (data) {
           return '';
      }
}

The responsive renderer should combine the hidden columns and the details. Here is an example from my app.

responsive: {
    details: {
        renderer: function ( api, rowIdx, columns ) {
            var detail = $.map( columns, function ( col, i ) {
                return col.hidden ?
                    '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                        '<td class="font-weight-bold">'+col.title+':'+'</td> '+
                        '<td colspan="2">'+col.data+'</td>'+
                    '</tr>' :
                    '';
                }).join('');

            var data = api.table("#users").rows(rowIdx).data()[0];      
            var i = 1;
            var roles = $.map(data.applicationUserRoles, function (role) {
            var role =
                '<tr>' +
                    '<td class="font-weight-bold">' + (i++) + '&nbsp;' + role.applicationRole.application.applicationName + '</td> ' +
                    '<td>' + role.applicationRole.roleName + '</td>' +                                                    
                '</tr>';
                return role;
            }).join('');
            return $('<table class="table-sm small"/>').append(detail + roles);
        }
    }
},

The table heading "Details:" will act as a delimiter between the responsive content and the detail content.

PetterBlack

Thank you JDMilne, your example is of great help.