DataTable exporting buttons in AngularJS

Question

I use the angular-datatable plugin, with export buttons.

Example here: http://l-lin.github.io/angular-datatables/#/withButtons

vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
    .withDOM('frtip')
    .withPaginationType('full_numbers')
    // Active Buttons extension
    .withButtons([
        'columnsToggle',
        'colvis',
        'copy',
        'print',
        'excel',
        {
            text: 'Some button',
            key: '1',
            action: function (e, dt, node, config) {
                alert('Button activated');
            }
        }
    ]);

My problem is that When I try to export, the hidden columns shown.

I try to find solution for export just the visible columns, And I find the solution here https://datatables.net/forums/discussion/3210/tabletools-how-to-hide-columns-when-exporting-copying

$('#list').dataTable({
  "sDom": 'T<"clear">lfrtip',
  "oTableTools": {
    "sSwfPath": "swf/copy_cvs_xls_pdf.swf", // setting path for swf file. Displays export buttons
    "aButtons": [{
      "sExtends": "copy",
      "mColumns": [0, 1, 2, 3, 4, 5] // Export settings for Copy to Clipboard
    }, {
      "sExtends": "csv",
      "mColumns": [0, 1, 2, 3, 4, 5] // Export settings for CSV file
    }, {
      "sExtends": "xls",
      "mColumns": [0, 1, 2, 3, 4, 5] // Export settings for Excel file
    }, {
      "sExtends": "pdf",
      "mColumns": [0, 1, 2, 3, 4, 5], // Export settings for PDF file
      "sPdfOrientation": "landscape"
    }],
  },

1. How can I add this option to angular-datatable plugin, For select which column export?
2. How can I change the file name for the export file (like excel, pdf)?

Solution 1

Here is the code I have followed and it works. This is for the file name change (2nd question). Please let me know if you have any issues with the following.

buttons: [
    {
        extend: "excelHtml5",
        fileName:  "CustomFileName" + ".xlsx",
        exportOptions: {
            columns: ':visible'
        },
        //CharSet: "utf8",
        exportData: { decodeEntities: true }
    },
    {
        extend: "csvHtml5",
        fileName:  "CustomFileName" + ".xlsx",
        exportOptions: {
            columns: ':visible'
        },
        exportData: {decodeEntities:true}
    }
]

Solution 2

Answer given by 24sharon is right but it wont completely satisfy your requirement to have custom fields to be in the csv file download . This can be done in the following way .

    $scope.dtOptions = DTOptionsBuilder.newOptions().withButtons([
                {extend:'csv',
                 title : '<What ever file name you need>',
                 text:'To Retry',
                 exportOptions: 
                    {columns:[1,2,3,4,5,6,7,8,9,10,11,12]}
                },
                {extend:'csv'}
]).withPaginationType('full_numbers').withOption('info', false).withOption('bFilter', true).withOption('paging', true);

In this above sample I have given it has custom columns and custom name for the button. Using this you can allow only columns you need and the best part is these can be either hidden or visible.

NOTE: This works if you have defined your columns in the following way

 $scope.dtColumnDefs = [
        DTColumnDefBuilder.newColumnDef(0),
        DTColumnDefBuilder.newColumnDef(1),        
        DTColumnDefBuilder.newColumnDef(2),
        DTColumnDefBuilder.newColumnDef(3),
        DTColumnDefBuilder.newColumnDef(4),
        DTColumnDefBuilder.newColumnDef(5).notVisible(),
        DTColumnDefBuilder.newColumnDef(6),
        DTColumnDefBuilder.newColumnDef(7).notVisible(),
        DTColumnDefBuilder.newColumnDef(8),
        DTColumnDefBuilder.newColumnDef(9),
        DTColumnDefBuilder.newColumnDef(10),
        DTColumnDefBuilder.newColumnDef(11),
        DTColumnDefBuilder.newColumnDef(12),
        DTColumnDefBuilder.newColumnDef(13)
      ];

I am not sure if this works in other scenarios . Please try and reply back if this works in other cases too, it can help other devs too

Ref:I found this solution using the answer given by 24sharon and few docs on datatables with options 'mColumns'

Solution 3

Thanks, The only change I made is to add it to angular-datatable option

$scope.dtOptions = DTOptionsBuilder.fromFnPromise(function() {

    //...
})
.withDataProp('data')
.withOption('initComplete', function(){
    $scope.loading = false;
})
.withButtons([
    {
        extend: "excelHtml5",
        filename:  "Data_Analysis",
        title:"Data Analysis Report",
        exportOptions: {
            columns: ':visible'
        },
        //CharSet: "utf8",
        exportData: { decodeEntities: true }
    },
    {
        extend: "csvHtml5",
        fileName:  "Data_Analysis",
        exportOptions: {
            columns: ':visible'
        },
        exportData: {decodeEntities:true}
    },
    {
        extend: "pdfHtml5",
        fileName:  "Data_Analysis",
        title:"Data Analysis Report",
        exportOptions: {
            columns: ':visible'
        },
        exportData: {decodeEntities:true}
    },
    {
        extend: 'print',
        //text: 'Print current page',
        autoPrint: false,
        exportOptions: {
            columns: ':visible'
        }
    }
]);