Responsive details programmatically

Responsive details programmatically

gSibingergSibinger Posts: 10Questions: 4Answers: 0

I need to toggle the child rows containing responsive details from a specific button. When using the row API, the function row().child() returns undefined, though. There are several column inside the responsive details area, using the "none" class. How can I access these through the datatables API?


  • kthorngrenkthorngren Posts: 20,225Questions: 26Answers: 4,755

    See if Allan's answer in this thread helps. The row().child() APIs are for manually creating Child Rows like in this example.


  • gSibingergSibinger Posts: 10Questions: 4Answers: 0

    Hi Kevin,

    unfortunately this is not helping in my case. This approach apparently still uses the inline-trigger for responsive details, which I can't use. The reason I need to toggle the details from another button is, that I use click events inside the first cell of a row for a different function.



  • colincolin Posts: 15,140Questions: 1Answers: 2,586

    Can you create a test case demonstrating what you want, please, as that would help understand the problem here. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.



  • gSibingergSibinger Posts: 10Questions: 4Answers: 0

    Hi Colin,

    I am now using a dedicated, always visible column to handle responsive details. This basically resolves the issue.
    I am still curious though, how datatables internally handles the visibility of these details and if you can access these internal functions via the row API.



  • rf1234rf1234 Posts: 2,802Questions: 85Answers: 406
    edited July 2020

    I need to toggle the child rows containing responsive details from a specific button.

    So did I. This is my custom button for that task.

    $.fn.dataTable.ext.buttons.showHideAllChildRows = {
        text: showHideAllChildRowsSelectedLabel,
        name: "showHideAllChildRowsButton",
        action: function ( e, dt, button, config ) {
            var selParent;
            if ( dt.rows( ':not(.parent)', { page: 'current' } ).count() > 
                 dt.rows( '.parent',       { page: 'current' } ).count()    ) {
                selParent = ':not(.parent)';
            } else {
                selParent = '.parent';
            setTimeout(function() {
                var sel = dt.rows( selParent, { page: 'current' } ).nodes().to$();
                    } )
            }, 50);

    If most of the child rows are visible the button will hide all child rows. If most of the child rows are hidden the button will show all child rows.
    It also uses a spinner because this isn't always very fast ...
    showHideAllChildRowsSelectedLabel is a global variable containing the language dependent label of the button ('Toggle Child Rows' or 'Details ein-/ausblenden').

    in addition I have this code here to make sure the toggle button is only shown when child rows exist at all, i.e. if the responsive extension has hidden some columns:

        .on( 'draw column-visibility responsive-resize', function () {
    function showHideChildRowsButton(that) {
        if ( that.responsive.hasHidden() && ) {
        } else {

    You will need the very latest DT and Editor versions for this to work. There had been a bug in responsive.hasHidden() in previous versions.

This discussion has been closed.