datatables / buttons

Buttons is an extension for DataTables that adds control buttons to the table.

Buttons

The Buttons extension for DataTables provides a common set of options, API methods and styling to display buttons on a page that will interact with a DataTable. Modules are also provided for data export, printing and column visibility control.

Installation

To use Buttons the primary way to obtain the software is to use the DataTables downloader. You can also include the individual files from the DataTables CDN. See the documentation for full details.

NPM and Bower

If you prefer to use a package manager such as NPM or Bower, distribution repositories are available with software built from this repository under the name datatables.net-buttons. Styling packages for Bootstrap, Foundation and other styling libraries are also available by adding a suffix to the package name.

Please see the DataTables NPM and Bower installation pages for further information. The DataTables installation manual also has details on how to use package managers with DataTables.

Basic usage

Buttons is initialised using the buttons option in the DataTables constructor, giving an array of the buttons that should be shown. Further options can be specified using this option as an object - see the documentation for details. For example:

$(document).ready( function () {
    $('#example').DataTable( {
    	buttons: [ 'csv', 'excel', 'pdf', 'print' ]
    } );
} );

Documentation / support

• Documentation
• DataTables support forums

GitHub

If you fancy getting involved with the development of Buttons and help make it better, please refer to its GitHub repo

buttons's Issues

JS crash when loading dynamic data integers

Datatables buttons csv export crashes when loading an integer that is provided with Javascript sourced data:

var dataSet = [
    [ "Tiger Nixon", "System Architect", "Edinburgh", 5421, "2011/04/25", "$320,800" ]
];

$(document).ready(function() {
    $('#example').DataTable( {
        data: dataSet,
        buttons: [ 'csv' ], 
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    } );
} );

Column toggle menu doesn't go away on tablets.

Testing the colvis part of datatable buttons on tablet, but the menu doesn't go away.

Print Selected

http://datatables.net/extensions/buttons/examples/print/select.html <-- this example is no longer functional. The custom 'Print selected' button doesn't work.

issue to convert a table with numbers into csv file

Hello my use case is here (from your site) :

    var mytable=$('#example').DataTable( {
        "data": [
        {
            "name":       "Tiger Nixon",
            "position":   "System Architect",
            "salary":     "$3,120",
            "start_date": "2011/04/25",
            "office":     "Edinburgh",
            "extn":       5421
        },
        {
            "name": "Garrett Winters",
            "position": "Director",
            "salary": "5300",
            "start_date": "2011/07/25",
            "office": "Edinburgh",
            "extn": "8422"
        },
        // ...
    ],
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "salary" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ],
        buttons: [
        'colvis',
        'csv'
    ],
    dom: 'Bfrtip'
    } );

When I click on csv generation button, I have an issue when the plugin try to use "replace" function with a number (here 5421). See here.
Is it a good idea to convert all cell into a String before? like this (replace line 352):

tampon=a[i].toString();
            s += boundary ?
                boundary + tampon.replace( boundary, '\\'+boundary ) + boundary :
                a[i];

tampon was initiate before!

Missing js in example

This page http://datatables.net/extensions/buttons/examples/html5/filename.html is missing pdfmake js files resulting in pdf button not being displayed to the end user.

CSV commas not escaped properly

I have the following data value in one of my table cells: BUMPER-16",STL,CUST,TOW When using the html5 csv export I end up with several cells which look like

| BUMPER 16\ | STL | CR | TOW" |

Feature Request: Export Header / Footer options

Scenario: I'm currently using ajax in order to populate my datatables based upon some "fancy" parameter selector. So a user is picking selection criteria for the report. Now they want to export their data to excel / csv, etc etc. Unfortunately, when they do that, they have no way of telling what their selection criteria was upon export, so when they go back to that spreadsheet a week from now they might not have any idea what they are looking at.

I think it would be ideal to provide some functionality for including an export header / footer option. Even if it's just assigning some plain text to be included when present would be useful and ideally this should be able to be changed through an API call so that the header / footer could be changed as part of an ajax callback function.

copyHtml5 - not working in Chrome

Hi,
I just checked Buttons example (http://datatables.net/extensions/buttons/examples/html5/simple.html) and on WIn 8.1 Chrome 44 I can't get Copy button to work.
If I open same page in IE11 everything works as expected (after pressing Ctrl + C data is copied to clipboard).
I've inspected that popup dialog in Chrome dev tools and that textbox is empty, when in IE there is text in it.

null TypeError when printing table footer

I have a general table init options object. For the print button I use footer: true. Some tables have a total footer, some do not have any footer. When I click the print button for a table that does not have a footer the js crashes with TypeError: a is null.

Can't use colvis button when installed through npm

After installing datatables-buttons from npm, it seems to load properly, but throws this error when trying to use the colvis button: Cannot extend unknown button type: colvis

I've tried looking around for other npm packages like datatables-buttons-colvis, but I haven't been able to find any. Is there a way to use the column visibility plugin with the buttons npm package?

'stripNewlines' config option not really considered

If 'stripNewlines' config option is false and 'trim' is true, \n chars are replaced by a space.
(error in function _exportData)

Add charset to blob.type for CSV export

type: "text/csv;charset=" + document.characterSet instead of type: "text/csv"

Column visibility doesn't work if data loading from server

Column visibility control will not work with next config:

$('#table').DataTable({
    "serverSide":true,
    "sAjaxSource":"http://localhost/users",
    "dom":"<\"dataTables_header\"Blfr>t<\"dataTables_footer\"ip>",
    "columns":[{
        "aTargets":"name",
        "mDataProp":"name",
        "title":"Name",
        "visible":true
    }, {
        "aTargets":"position",
        "mDataProp":"position",
        "title":"Position",
        "visible":true
    }],
    "buttons":[{"extend":"colvis","className":"button"}],
    "aaSorting":[[0,"asc"]]
});

You will get an empty box instead of column names

I've changed columnVisibility method in buttons.colVis.js:

//before
columnVisibility: {
    /*...*/
    text: function ( dt, button, conf ) {
        return $(dt.column( conf.columns ).header()).text();
    },
    /*...*/
},
//after
columnVisibility: {
    /*...*/
    text: function ( dt, button, conf ) {
        return dt.settings()[0].oInit.columns[conf.columns].title;
    },
    /*...*/
},

and it work fine for me. But I suppose that it will not work for usual tables. Maybe it should looks like:

columnVisibility: {
    /*...*/
    text: function ( dt, button, conf ) {
        return dt.settings()[0].sAjaxSource ? 
            dt.settings()[0].oInit.columns[conf.columns].title :
            $(dt.column( conf.columns ).header()).text();
    },
    /*...*/
},

CSS folder contains SCSS files

The CSS files are nowhere to be found in the repository which makes no sense when using bower.

Column visibility + Export buttons

If I hide some columns with help of Column visibility button, they should not appear in exported files.

Add friendly warning when dom: 'B' provided, but no button config

We run all of our tables through the same table initializer function. I had set dom: 'B...' as default, but in some cases, I added the buttons after initialization. Because B was set, but no config was present and this is undefined. It is called because the dom attr finds "B", i.e.:

// DataTables `dom` feature option
DataTable.ext.feature.push( {
    fnInit: function( settings ) {
        var api = new DataTable.Api( settings );
        var opts = api.init().buttons;

        return new Buttons( api, opts ).container();
    },
    cFeature: "B"
} );

This is not a datatables bug, but I thought it may be worth considering in the code snippet above to add a if ( !opts ) throw new ReferenceError('table initialized with Buttons pane location, but no buttons config'), or similar!

Just throwin' out ideas! Thanks,

Chris

Print view doesn't work if (typeof data == 'number')

Data for datatable:

{
  {id: 1, name: 'John Doe'},
  {id: 2, name: 'Jane Doe'}
}

I've got an error when trying to print table:

Uncaught TypeError: str.replace is not a function @ dataTables.buttons.js:1381

The problem is in strip function. You should check type of variable. For example:

var strip = function ( str ) {
    if (typeof str == 'number') {
        return str;
    }
    /*...*/
};

excelHtml5 action save zip files instead of xlsx

The problem: Saving the excel to disk, Firefox "Save As "dialog indicates that a zip file is going to be saved. This causes an error if "Open with" is used, since it is not an excel file.

The problematic code is:

        _saveAs(
            zip.generate( {type:"blob"} ),
            _filename( config )
        );

This code will apply the mime type zip.

Can be easily be patched by

        var dataArray = zip.generate( {type:"uint8array"} );
        _saveAs(
            new Blob([dataArray], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }),
            _filename( config )
        );

As patch

@@ -662,8 +662,9 @@
        xl_rels.file(       'workbook.xml.rels',   excelStrings['xl/_rels/workbook.xml.rels'] );
        xl_worksheets.file( 'sheet1.xml',          excelStrings['xl/worksheets/sheet1.xml'].replace( '__DATA__', xml ) );

+       var dataArray = zip.generate( {type:"uint8array"} );
        _saveAs(
-           zip.generate( {type:"blob"} ),
+           new Blob([dataArray], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }),
            _filename( config )
        );
    },

CSV HTML5: Only first instance of boundary is being escaped

When escaping boundary characters, currently only the first boundary that is found gets escaped. See http://jsfiddle.net/50x1m4bt/1/

A tweak to the first join of the _exportData function can correct the issue (notice the new "g" modifier for the replace)

var join = function ( a ) {
        var s = '';
        var boundary = config.fieldBoundary;
        var separator = config.fieldSeparator;

        // If there is a field boundary, then we might need to escape it in
        // the source data
        if (boundary) {
            var reg = new RegExp(boundary, "g");
        }
        for ( var i=0, ien=a.length ; i<ien ; i++ ) {
            if ( i > 0 ) {
                s += separator;
            }

            s += boundary ?
                boundary + a[i].replace( reg, '\'+boundary ) + boundary :
                a[i];
        }

        return s;
    };

table.button('selector') are not consistent?

Hi,

I would like to know how to achieve similar example at here: https://jsfiddle.net/gr5er1pj/2/
There is two a href button to link to particular button via table.button API

I try to modify the example and come up with this: https://jsfiddle.net/wt45q92h/1/
But the Export CSV are not working on my modification.

However, i see not reason it will not work.

Thanks.

add colspan support for footer

When printing a table with colspan in footer the cell is repeated with no colspan.

Example:

<tfoot>
    <tr>
        <th colspan="3">a</th>
        <th>b</th>
    </tr>
</tfoot>

results in

a	a	a	b

Modifying cell data before export

I couldn't find example how to modify cell data before exporting to pdf or csv. In tablestools this was possible with fnCellRender. Is there something similar in Buttons?

add support for colspan in tfoot when exporting

At the moment any colspan in the table footer is replaced by several single cells, repeating the content of the multi-cell, which is not desirable. The exported table should maintain the structure of the original table.

Test case: https://jsfiddle.net/Lr77dgmt/3/

Unavailable buttons still show up when using extend

If you declare a button by saying you want to extend it, and it turns out you can't use that button. It still get's put inline with no text.

http://jsbin.com/reyufosazo/edit?js,output

I think it comes from https://github.com/DataTables/Buttons/blob/master/js/dataTables.buttons.js#L771
It fails to resolve a button it can't use, so returns false. But nothing is there to stop a false from continuing.

Bootstrap integration on site

When viewing example of Buttons plugin with Bootstrap 3 integration (http://datatables.net/extensions/buttons/examples/styling/bootstrap.html) I noticed that buttons aren't styled correctly.
I get this:

When I think this should be result:

Problem occurs in http://datatables.net/media/css/site-examples.css file, that is overriding default Bootstrap style, maybe this can be fixed to show integration correctly?

Also there is small CSS bug: distance between table and buttons and between table and search input is different.

Provide a filename option and allow it to be a function

At the moment, the export files base the file name on the title parameter of the button configuration object. Really there should be a filename option so you can specify a title independently of the file name and it should be allowed to be a function so it can execute and return dynamic values.

some? UTF8 Characters don't export to csv properly

I haven't dug into the cause of this or perhaps I need to be formatting my data a different way in my json encoding? Either way here's an example:

http://jsfiddle.net/50x1m4bt/2/

Note that the Ñ character ends up being Ñ in the csv (HTML5 version)

Missing ui- class on DT defaults

Hey Allan!

Here you have defined the default classes for jquery ui buttons. I'm not a css design expert, but I think perhaps 'ui-corner-all' is missing? When I look at the jQuery theme roller site, the defaults have 'ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only'.

Feel free to close if it's a non issue. Thx!

-Chris

Title for buttons

It would be nice to have an option for setting attribute title for button. For example when using iconic buttons.

Use clipboard.js to copy to clipboard

I just found https://github.com/zenorocha/clipboard.js
It allows to copy to clipboard using execCommand and has a fallback that use select.
Maybe this could be used to allow copying?
ng-clip (https://github.com/asafdav/ng-clip/tree/clipboard-js) is already using this.

Export buttons error

When trying to use the CSV export button I'm getting an error on numeric data:
a[i].replace is not a function [buttons.html5.js - line 311]

This is the data in my table:

Department  Count
Support         2

I resolved the error by adding .toString() before the replace:

s += boundary ?
         boundary + a[i].toString().replace( boundary, '\\'+boundary ) + boundary :
         a[i];

Similar export code exists in buttons.flash.js

I hope this helps.

Publish npm package

Hi. I see there is an official package for the core library (https://www.npmjs.com/package/datatables). Any plans on publishing npm packages for the Extensions as well?

Cheers

Excel export sometimes corrupt

Hey!

I'm having some funny issues with Button's Excel export. Sometimes Excel-file is corrupt - sometimes it works fine.
In both cases I can extract the files as zip - this it's not the the zipping that is the issue (I use latest JSZip v2.5.0-15).
I'm Ussing latest Buttons version 1.1.0.

First I thought the issue was because of special non-English characters - but both files are with non-English characters... Maybe issue is size/length/#row related or some encoding?

This file is corrupt:
https://www.dropbox.com/s/v7qw8xja6zslxx8/test-corrupt.xlsx

This file works fine:
https://www.dropbox.com/s/gmbc7i0u9vi3isv/test-works.xlsx

Both files are extractable - so maybe you can see more details about where exactly the issue is.

clicking CSV button gets Uncaught TypeError: a[i].replace is not a function

join                                @   buttons.html5.js:311
_exportData                     @   buttons.html5.js:323
DataTable.ext.buttons.csvHtml5.action   @   buttons.html5.js:482
(anonymous function)                @   dataTables.buttons.js:545
jQuery.event.dispatch               @   jquery-2.1.4.js:4435
jQuery.event.add.elemData.handle        @   jquery-2.1.4.js:4121

This is the code in question:

s += boundary ?
                boundary + a[i].replace( boundary, '\\'+boundary ) + boundary :
                a[i];

How to use with Editor

I cannot find the initialization to work with Editor (instead of TableTools)

Error in file generated for excel

The excel file generated with excel button (both HTML5 and Flash) is corrupted if it has ~1500 or more rows. When I try to open the generated file in Excel 2013, it just shows a message saying that it found a problem with the file and asks if it can repair it. Clicking on repair doesn't solve the issue (not clicking either). I tried different datasets and still have same issue. From what I tested, it works fine if it has around 1200 rows or lower.
The layout is as following (7 columns):
[TextHeader][TextHeader][TextHeader][TextHeader][TextHeader][TextHeader][TextHeader]
[Text][Number][Date(dd/MM/yyyy)][Number][Number][Number][Text]

Thanks!

Support Complex Header Automatically?

Does the Buttons support Complex Header as https://datatables.net/examples/advanced_init/complex_header.html

Thanks.

Allow for Pre and Post Actions.

I can't find a good way to do things before or after a buttons action has occurred.

Here's what I ended up doing.

I went in to https://github.com/DataTables/Buttons/blob/master/js/dataTables.buttons.js#L561 and added

if ( ! button.hasClass( buttonDom.disabled ) && config.preAction ){
    config.preAction.call( dt.button( button ), e, dt, button, config );
}

I would have done the same thing for postAction but that wouldn't support async actions.

https://github.com/DataTables/Buttons/blob/master/js/dataTables.buttons.js#L819 I added

if(conf.postAction){
    var _originalAction = conf.action;
    conf.action = function(e, dt, button, config){
        _originalAction.call(this, e, dt, button, config);
        conf.postAction.call(this, e, dt, button, config);
    }
}

That groups the execution of the postAction more tightly to the true finish of the button's Action.

These inclusions changed the way I had to do my lazy require I mentioned in #43.

Instead of being able to go straight to the html5 action I wanted and wrapping it in an async, I had to it after it had been attached to the buttons config, or it would do the same thing as if I'd put it inline with the preAction call.

So I had to commit a sin.

var _OriginalBuildButton = $.fn.dataTable.Buttons.prototype._buildButton;

$.fn.dataTable.Buttons.prototype._buildButton = function(conf, collectionButton){
    if(conf.name && conf.name === 'excel'){
        var originalAction = conf.action;
        conf.action = function(...args){
            require.ensure(['jszip'], function _excelHtml5Action(){
                // Exports the JSZip object. Up to us to strap it to the window.
                window.JSZip = require('jszip');
                originalAction(...args);
            }, 'datatable_exports_lazy')
        }
    }
    return _OriginalBuildButton.call(this, conf, collectionButton);
};

I added a name attr to all my actions for identification purposes.

If you have anything in mind for a better way to handle all this nonsense. Please

tfoot is converted to thead in exports

The exported table uses thead for the table footer instead of tfoot.

Test case: https://jsfiddle.net/Lr77dgmt/3/

bower: register package

Thanks for adding a bower.json file!

Unfortunately, I can't find the package in the registry. Have you registered it?

Right-aligned values become left-aligned on Print button

I'm not sure if I am doing this correctly, but I have two columns that are right-justified. When you click the Print button, they become left-justified on the proposed print. I'm using your corrected Fiddle from my last issue (btw, thanks for looking into it). Am I using the "columnDefs" correctly?

https://jsfiddle.net/642546ff/2/

Bug in text method of dataTables.buttons.js

Bug recently introduced here: https://github.com/DataTables/Buttons/blob/master/js/dataTables.buttons.js#L330

var linerTag = typeof idx === 'string' && idx.indexOf( '-' ) ?

Code should instead be comparing the result of idx.indexOf('-') !== -1

When can we expect Buttons 1.1.0?

Since the current dev-branch 1.1.0 of Buttons supports format in the exportOptions, I would like to know when we can expect the release of Buttons 1.1.0? Or better yet, can we expect dev-builds options in the Download builder any time soon?

Regards,
TK

Separate title & filename param values not working

When I set both the title and filename params, in that order, and separate values, it seems the title also takes on the filename param.

Tried with the bleeding edge copies of dataTables.buttons.js, buttons.bootstrap.js & buttons.html5.js

Possibly related to #20

Thanks in advance!

Cannot declare buttons in DataTable Defaults.

It seems that if you want buttons on a table, you must pass them in the options at initialization time.

http://jsbin.com/pazepi/edit?js,output

Loading JSZip and PDFMake scripts dynamically

@DataTables, as all we know and as you say "the disadvantage is that these files can significantly increase the amount of Javascript required on your page". It's not a good idea to load extra 500 kB library if it's not used everyday. And it's the only reason that stops me (and many other developers I think) from using it. Is it possible to load these libraries dynamically, only when user clicks "Export to PDF"/"Export to Excel" button for example? I'm not asking for solutions (code examples) here. I'm asking just about a possibility of that. And what do you think about this idea in general?

Spell Mismatch

Sorry, I couldn't find the respective page to make an update and PR.

On this page - http://datatables.net/extensions/buttons/config, Under Built in options category, Line as follows :
The Buttons library provides a number of core options that at common to all button types.
Should be
The Buttons library provides a number of core options that are common to all button types.

Problem with tfoot and thead in excel file

Hi,

I found one more issue with the generated excel file. When thead has multiple lines, it will only show the last one in the excel file, and tfoot content doesn't show at all.

Thanks!

Buttons: too many iterations

I been trying to follow this example:
https://editor.datatables.net/examples/advanced/localstorage.html

and after loading all my scripts, in my browser console I received the error:

Uncaught: Buttons: Too many iterations

I have no idea what this means, or what I'm doing wrong. But I can't follow this demo.

Column Visiblility with Bootstrap Integration and Column Reorder

When working with Row Reorder and the bootstrap template integration the Column Visibility dropdown buttons break when a user reorders a column.

Before a user reorders a column, the buttons in the visibility dropdown are like:
<li class="dt-button buttons-columnVisibility" tabindex="0" aria-controls="CD_Data"><a>Address</a></li>
but after the columns are reordered the <a> tags around the 'column name' are missing on all of the buttons, so they are just plain text.

For reference I am using:
Bootstrap 3.3.5,
DataTables 1.10.9,
Buttons 1.0.3,
Column visibility 1.0.3,
and
ColReorder 1.2.0