Responsive makes columns invisible for export even when vertically uncollapsed

[legshooter]

Hey,

I guess this is kind of overlapping with Buttons, I wasn't so sure where to post this.

I am using exportOptions.columns: ':visible:not(.control):not(.select-checkbox)' on all my export buttons (as mentioned in DataTables/Buttons#102), but unfortunately when Responsive collapses columns they become invisible, even though the user still has them as visible through the use of colvis, obviously resulting in them being excluded from the export.

On second thought, I figured this might make sense, because there's a display: $.fn.dataTable.Responsive.display.childRowImmediate option that collapses the columns horizontally, but keeps them uncollapsed vertically. Unfortunately, it appears as though the result is the same - Even though the data is now visible on the screen, it is still being excluded from the export due to the :visible... selector.

Is this intended behaviour? Is there a technical barrier to change this? Any chance for a fix/enhancement?

The ultimate goal is to let users easily export the columns they want through the use of colvis and the export buttons, and enjoy the same flexibility on smaller screens, without Responsive interfering and forcing exclusion of columns due to screen size.

Thanks.

[DataTables]

As you say it is due to the :visible selector which is based on the column, not any child row display, so yes, this is the expected behaviour. You would need to use some other selector to get the behaviour you want I'm afraid.

[legshooter]

For anyone interested, here's the hack I came up with:

buttons: [
    {
        name: 'print',
        extend: 'print',
        exportOptions: {
            rows: ...
            columns: ...
        },
        action: function(e, dt, button, config) {
            responsiveToggle(dt);
            $.fn.DataTable.ext.buttons.print.action(e, dt, button, config);
            responsiveToggle(dt);
        }
    },
    ...
]

Unfortunately, the API has no built in toggle for Responsive, so I went with:

responsiveToggle(dt) {
    $(dt.table().header()).find('th').toggleClass('all');
    dt.responsive.rebuild();
    dt.responsive.recalc();
}

Of course If you already use .all this can be problematic.

Combined with what I wrote earlier, this lets the user fully control columns visibility for exporting and blocks Responsive from interfering, while keeping the UI intact.

Would love to see something implemented along these lines instead of relying on this hack.

[lenamtl]

I finally figure out where to put the code function datatables.js

function responsiveToggle(dt) {
   $(dt.table().header()).find('th').toggleClass('all');
   dt.responsive.rebuild();
   dt.responsive.recalc();
}

Hope that won't break anything

[khagesh007]

This is working fine i have tested. But only for print option other export methods are not selecting that columns which are not visible in responsive mode.

define this function above data table codes mentioned by @lenamtl

function responsiveToggle(dt) {
            $(dt.table().header()).find('th').toggleClass('all');
            dt.responsive.rebuild();
            dt.responsive.recalc();
        }

and add this to your buttons: block

buttons: [
                     {
                                 extend: 'print',
                                 exportOptions: {
                                            columns: ':visible'
                                        },
                               action: function(e, dt, button, config) {
                               responsiveToggle(dt);
                              $.fn.DataTable.ext.buttons.print.action(e, dt, button, config);
                              responsiveToggle(dt);
                                 }
                   }
]

[lenamtl]

Hi,
This bug is still present in the latest Datatables but the fix is no loguer working any clue how to fix this?

I'm trying to update from Datatables 1.10.11 but this fix is no longuer working and is very important so the user need to export all the column not only the visible ones.

[DataTables]

Can you link to a test case showing the issue please? My note above says that it is working as expected in the original case described. So I'd need a test case showing the issue to be able to debug it.

[lenamtl]

Go to https://jsfiddle.net/lenamtl/o8se63fw/
Resize the table so you can see name, office and tools columns then export CSV or Copy
It will export only the visible (from responsive view) columns, not all visible columns from the table.

The fix provided #90 (comment)
was working fine with Datatables 1.10.11 and allow to export all visibe columns

But unfortunately the fix no longuer work with newest Datatables version.
Could you provide a work around, I need a fix for this bug.

[DataTables]

That seems correct to me since you have explicitly told it to only export visible columns:

columns: [':visible:not(.not-export-col):not(.hidden)'],

[lenamtl]

Hi,

No this is not ok as the toggle items should be exported (if they are visible when not toggle), and we don't want to export hidden items.

Why this old fix is no longuer working with the new version?
How would you fix that?

this was added to datatables main script page completely at the beginning of the js file

function responsiveToggle(dt) {
            $(dt.table().header()).find('th').toggleClass('all');
            dt.responsive.rebuild();
            dt.responsive.recalc();
        }

and this added to buttons: block

buttons: [
                     {
                                 extend: 'print',
                                 exportOptions: {
                                            columns: ':visible'
                                        },
                              
                             action: function(e, dt, button, config) {
                                     responsiveToggle(dt);
                                     $.fn.DataTable.ext.buttons.print.action(e, dt, button, config);
                                     responsiveToggle(dt);
                                 }
                   }
]

This is a big issue and prevent me to update...

[lenamtl]

Any news on this problem

[DataTables]

Sorry - I forgot to look into this at the time. Can you give me a link to a page showing the issue please? It seems to me that the selector used is selecting visible columns that are not marked as not-export-col`. I think I'll need a test case to fully understand this.

[lenamtl]

Go to https://jsfiddle.net/lenamtl/o8se63fw/
Resize the table so you can see name, office and tools columns only, then export CSV or Copy
It will export only the visible (from responsive view) columns, not all visible columns from the table.

Toggled columns are visible they are just toggled.

The fix provided #90
was working fine with Datatables 1.10.11 and allow to export all visibe columns even if they are toggled.

But unfortunately the fix no longuer working with newest Datatables version.
Could you provide a work around, I need a fix for this bug.

[zant123]

Hi,

No this is not ok as the toggle items should be exported (if they are visible when not toggle), and we don't want to export hidden items.

Why this old fix is no longuer working with the new version?
How would you fix that?

this was added to datatables main script page completely at the beginning of the js file

function responsiveToggle(dt) {
            $(dt.table().header()).find('th').toggleClass('all');
            dt.responsive.rebuild();
            dt.responsive.recalc();
        }

and this added to buttons: block

buttons: [
                     {
                                 extend: 'print',
                                 exportOptions: {
                                            columns: ':visible'
                                        },
                              
                             action: function(e, dt, button, config) {
                                     responsiveToggle(dt);
                                     $.fn.DataTable.ext.buttons.print.action(e, dt, button, config);
                                     responsiveToggle(dt);
                                 }
                   }
]

This is a big issue and prevent me to update...

You just have to update $.fn.DataTable.ext.buttons.print.action(e, dt, button, config); for the latest version and your selector for exportOption needs to be updated.

buttons: [
                     {
                                 extend: 'print',
                                 exportOptions: {
                                            columns: [":visible:not(.not-export-col):not(.hidden)"]
                                        },
                              
                             action: function(e, dt, button, config) {
                                     responsiveToggle(dt);
                                     $.fn.DataTable.ext.buttons.print.action.call(this,e, dt, button, config);
                                     responsiveToggle(dt);
                                 }
                   }
]

This has been working for me and I am using datatables ver: 1.10.23

I have updated the fiddle for excel export and it seems to be exporting the childrows created using responsive into excel.

https://jsfiddle.net/s3z2e7ak/

[lenamtl]

Hi,

Thanks @zant123

This is working fine, I'm very happy now I will be able to update to the newest version

So we just need replacing this

$.fn.DataTable.ext.buttons.excelHtml5.action(e, dt, button, config);

with this

$.fn.DataTable.ext.buttons.excelHtml5.action.call(this e, dt, button, config);

The part that change is call(this, e, dt, button, config);

[DataTables]

@zant123 Many thanks for noting that ! The .call( this is required in order to call the action in the scope of the activating button.

[AllanJard]

I think things are working okay here with the latest versions, so closing issue.