datatables / tabletools

Please note that TableTools has now been retired and replaced by the Buttons and Select extensions which offers significant improvements and API integration with the rest of DataTables and the other extensions.

Important - this is retired software

Please note that TableTools has now been retired and replaced by the Buttons and Select extensions which offers significant improvements and API integration with the rest of DataTables and the other extensions.

It is strongly recommended that you upgrade if possible to Buttons and Select, and to not use TableTools in any new projects.

TableTools

TableTools is a plug-in for the DataTables HTML table enhancer, which adds a highly customisable button toolbar to a DataTable. Key features include:

• Copy to clipboard
• Save table data as CSV, XLS or PDF files
• Print view for clean printing
• Row selection options
• Easy use predefined buttons
• Simple customisation of buttons
• Well defined API for advanced control

Installation

To use TableTools, first download DataTables ( http://datatables.net/download ) and place the unzipped TableTools package into a extensions directory in the DataTables package (in DataTables 1.9- use the extras directory). This will allow the pages in the examples to operate correctly. To see the examples running, open the examples directory in your web-browser.

Basic usage

TableTools is initialised using the T option that it adds to DataTables' dom option. For example:

$(document).ready( function () {
	$('#example').DataTable( {
		dom: 'T<"clear">lfrtip'
	} );
} );

Documentation / support

• Documentation: http://datatables.net/extensions/tabletools/
• DataTables support forums: http://datatables.net/forums

GitHub

If you fancy getting involved with the development of TableTools and help make it better, please refer to its GitHub repo: https://github.com/DataTables/TableTools

tabletools's Issues

Uncaught TypeError: Cannot read property 'Api' of undefined TableTools.js:2539

Trying to use DataTables and TableTools with Bower and RequireJS and I seem to get this error for some reason.

$.fn.dataTable Exists but $.fn.dataTable.Api does not.

Using DataTables Version 1.9.4 and TableTools Version 2.1.6-dev

Excel Formating

In Excel export i cant able to format the excel cells like headers with bold, coloring etc... And Another while exporting excel cells are merged how to set width of columns

Restore elements that are hidden during fnPrint to previous display value, not "block".

Elements that are hidden during the print function should be restored to their previous display value. Currently they are set to "block". I've included a patch below.

https://gist.github.com/zachlowry/5220953

Multiple tables under different query tabs - only first tabs table buttons work...

Hi Ive got this project on http://dm.digitalchemy.ca/DataMiner.php and am rendering three different datatables, and using the tableTools.js to permit csv export of the tables. works good for the first table, but the other ones dont do any actions (or js errors) on clicks...

i also noticed that all my "head" tag content is rendered after the body tag since i can't spot which version...

im using TableTools-2.2.3 and bootstrap.

let me know if anyone can take a look at it, id certainly love to avoid rendering those on different urls and need to have the csv function working.

thanks in advance!

Use HTML5 ClipBoard API

Hello!

I saw your post about HTML5 API for clipboard and file methods (http://next.datatables.net/blog/2014-01-31).

It would be nice to test ClipBoard API, because many browsers does support it, including Android and IOS browsers (see http://caniuse.com/#feat=clipboard). This way, mobile users would be able to copy and paste tables, which I guess is a huge new feature

Sadly, FileSystem API is only implemented in Chrome and Opera (see http://caniuse.com/#feat=filesystem). So, we can't fire Flash yet, at least for exporting options.

This way, pull request #32 shouldn't be merged into TableTools.

What do you think about it, Allan?

HTML table output button

From http://datatables.net/forums/discussion/15390 - suggestion is to have a button which generates an HTML table in the saved file.

Downloads not notifying the user that they occur

When using the download feature (either to CSV or to PDF), there is no notification from the browser that the download is complete like from a traditional download. This is causing a client of ours a lot of confusion. I don't believe it's a configuration issue on our end, because I am seeing the same behavior on the example TableTools page.

Steps to reproduce:

1. Navigate to the TableTools page linked above.
2. Click the "CSV" button.
3. Choose a download location (or let the browser pick its default - either way).
4. File downloads, but does not notify the user.

Expected behavior:

During (4) the browser should raise a notification (through the download bar in Chrome, download progress in Firefox, an alert box, or similar function) that the download is first occurring and then finished.

I tested this in Chrome 31.0.1650.57 and Firefox 27.0.1 on Ubuntu 12.04 (x64) and Chrome 33.0.1750.117 m, Internet Explorer 11.0.9600.16476, and Firefox 27.0.1 on Windows 7 (x64).

XSS vulnerability persists with copy_csv_xls in older Flash vers

According to the reporting user: "The TableTools repo is not updated fully to the latest version of ZeroClipboard so that's unfortunately the reason why it's still vulnerable. The latest version of ZC uses replace for the escaping, but these old ones use split().join() which was possible to bypass."

Also see: https://bounty.github.com/researchers/masatokinugawa.html

POC-link: (works for Flash versions below 12.0.0.77)
copy_csv_xls.swf?id=%ED%A0%80%5C%22%29%29%7Dcatch%28e%29%7Balert%281%29%7D%2F%2F&width=1&height=1

Newest zeroclipboard: https://github.com/zeroclipboard/zeroclipboard/tree/master/dist

Wrong reference in Readme.txt

In your Readme.txt you say: "...place the unzipped TableTools package into a extensions directory in the DataTables package...", but there's no extensions directory in DataTables 1.9.4.

Colvis integration as TableTools button

Hello!
I was wondering if it will be possible to get Colvis finally integrated as one more TableTools button.
I read more than year ago this posibility and I think that Allan is very busy at the moment.
Anyway, maybe if we create this issue as a new petition, someone else could help us improving the existing code to get it done.
Thanks!

Improve documentation for "Initialisation with 'new'" example

The "Initialisation with 'new'" example page at http://datatables.net/release-datatables/extensions/TableTools/examples/new_init.html could do with an update to show where the TableTools options should be set. Currently, there's no way to know that you need to move the TableTools options from the DataTable() method to the TableTools() method.

eg.

$(document).ready(function() {
    var table = $('#example').DataTable({
        // don't set TableTools options here
    });
    var tt = new $.fn.dataTable.TableTools( table, {
        // set TableTools options here instead
    } );

    $( tt.fnContainer() ).insertAfter('div.info');
} );

[enhancement] Add missing bower.json.

Hey, maintainer(s) of DataTables/TableTools!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library DataTables/TableTools is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "DataTables/TableTools",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Allow click columns to be specified for row selection

Just as the titles says - at the moment the whole row is used of the click - would be good to disallow certain columns.

bSelectedOnly not working ?

Hello, i think bSelectedOnly doesn't work. It's exporting the entire table all the time
It's was a bug in 2.1.2 version.

var table = $('#statistiques').DataTable( {
dom: 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [
{
"sExtends": "csv",
"sFileName": "Statistiques.csv",
"sCharSet": "utf8",
"bFooter": false,
"sFieldSeperator": ",",
"sButtonText": "Exporter en CSV",
"bSelectedOnly": true
},
]
}
});

Tooltip does not display on print button

Repro: Specify "sToolTip" for print button. Note that no title attribute is added on the resulting dom element.

All the flash buttons work, but this is not a flash button.

To fix, just add the following to _fnPrintConfig():

    if ( oConfig.sToolTip !== "" )
    {
        nButton.title = oConfig.sToolTip;
    }

Issue in sMessage option in Print Functionality

My TableTools 2.2.0 was not leaving me print a custom Message (you know, the sMessage option), so I dig into the code and I found that in line 2,314, in the following section:

if ( oConfig.sMessage )
{
$('

')
.addClass( this.classes.print.message )
.html( oConfig.sMessage )
.prepend( 'body' );
}

I needed to add .prependTo instead of .prepend to get it working. Don't know if is an error but I wanted to share the issue.

Multiple calls to swf file

I happened to notice in my application that the copy_csv_xls_pdf.swf is getting called three times when datatables/tabletools are invoked. I put together a jsfiddle to illustrate the issue:

The same behavior can be observed from the TableTools documentation:

Why is this file getting loaded multiple times? It's particularly problematic because the intial load of the file doesn't seem to be cached by the browser for subsequent loads.

Please use valid semver tags

Tools like bower are unable to consume packages with invalid semver tags because it breaks their ability to do dependency resolution. Instead of creating tags like RELEASE_2_1_5 if you did 2.1.5 it would work.

table tooles :buttons don't display

hi,
I'm using Tabletools like in the live demo with js/css files required but I receive any display on screen:

here a part of my code :

$(document).ready(function() {TableTools.DEFAULTS.aButtons = [ "copy", "csv", "xls" ];$('#myTable').dataTable( {"sScrollY": "700px","bJQueryUI": true,"bScrollCollapse": true,"sPaginationType": "full_numbers" , "iDisplayLength": 50}
,{"aoColumns": [null,null,null,null,null,null,null,{ "sType": "currency-pre" }]},{"sDom": 'T<"clear">lfrtip'}).columnFilter();

} );

tabletools not working in modal ??

i use a datatable in modal bootstrap and the tabletools not working ani idea, i use the same code , but nor modal and work , in the console not show nothing please help me ..:/

Not working if I call DataTables on a class

Hi Guys,

DataTables (DT) has a method to initialize on a class. It is very handy if a page contains varying number of tables. But if I call TableTools with DT this way, I can see the buttons but TableTools (TT) doesn't work.

If I set TT to show 3 buttons only (copy, Excel, pdf), I have this 3 at the 1st table but all the 5 available buttons at the others.

Additionally, Firebug catches a 404 for the swf file: 'NetworkError: 404 Not Found - http://localhost/mm/media/swf/copy_csv_xls_pdf.swf'

TableTools looks for the swf on the default location disregarding my (otherways correct, see below) setting.

If I switch the class to an ID, everything is fine: working DT and TT with 3 buttons on one single table.

I read the doc and asked it twice in DT forums but no luck.

http://www.datatables.net/forums/discussion/22002/
http://www.datatables.net/forums/discussion/22030/

So this code doesn't work. If I replace the '.ansTable' class with an ID, everything is fine. My page contains 6-30 (or more) tables.

$(document).ready(function() {
  $('.ansTable').dataTable({
    'sDom': 'T<"clear">lfrtip',
    'bSort': false,
    'bPaginate': false,
    'oTableTools': {
      'sSwfPath': "js/jQuery.datatables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
      'aButtons': [{
          'sExtends': 'copy',
          'sButtonText': 'vágólap',
          'mColumns': 'all'},
        {
          'sExtends': 'xls',
          'sButtonText': 'Excel / CSV',
          'mColumns': 'all'},
        {
          'sExtends': 'pdf',
          'sButtonText': 'pdf',
          'mColumns': 'all'},
      ]
    },
  });
});

I think it's a bug.

Copy happens without applying fnRender

DataTables 1.9.4 and TableTools 2.1.4

I have fnRender to display integers correctly, with no decimals.
When I Copy from TableTools, values are copied with decimal point and 1 decimal value ('0').

Please see this :
http://datatables.net/forums/discussion/14119/tabletools-2.1.4-and-fnrender

Sorting column as "numeric"

Hello,
as per title: How can I sort column as "numeric"?

Thanks

Add fnHeaderRender callback option

See point 4 here: http://datatables.net/forums/discussion/10473

Pass the event through to fnClick

Could you pass the event through to the fnClick so when can use event.stopPropagation(); when using buttons that create drop down menus.

https://github.com/DataTables/TableTools/blob/master/media/js/TableTools.js#L1259

Keep color and formatting information in Excel

If you download the Excel file of table it shows all the content correctly. Kindly add the feature of keeping the formatting and colour information of cells so that the table looks exactly the same as it looks on webpage.

I achieved this without using TableTools here: http://jsfiddle.net/chankeypathak/7cwZ9/1/show/

But I really want to use TableTools. Can you please add this feature? Thanks.

XLS file appears to be a CSV

The XLS and CSV buttons appear to save the same thing. Is there a way to generate an actual XLS file?

Bug exporting invisible column to PDF

I found a bug where a column with property "bVisible":false is not properly exported to PDF. I have written a sample HTML page, see https://gist.github.com/4599023. Unfortunately you have to run the HTML page from a local webserver because of Flash security restrictions. (It seams the .swf must be served from the same webserver as the HTML file, opening the file with the browser wan't work. I also wrote a jsFiddle with the same problem, perhaps because of the iframe).

The example contains a table with 4 columns, the 3rd column is hidden with "bVisible":false. I would like export all 4 columns, TableTools has been configured with:

"aButtons": [
    {
        "sExtends": "pdf",
        "mColumns": [0, 1, 2, 3],
        "sPdfOrientation": "landscape"
     }
]

The exported PDF has the 4th column merged into the 3rd.

Garbled flash buttons

Screenshots: http://www.revpol.com/images/almir-0.1beta-buttonimagecrruption.png
Demo: http://almir-demo.domenkozar.com

Google ChromeI19.0.1084.52 (Official Build 138391)
WebKitI536.5 (@118056)
JavaScriptIV8 3.9.24.28
FlashI11.2 r202

Browser freezes

When click on PDF icon few times in a row, browser freezes and it's not possible to do anything for a least 30 seconds.

See video:

fnInfo function not working correcty

In fnInfo, there is is a function-invocation ... append('body'), but should be appendTo('body')

Then fnInfo popup is working again on my machine.

Where is sButtonClassHover option?

It's documented, but it doesn't work and I don't see it in the included js (version 2.1.4) in datatables 1.9.4 package (neither nuget or web).

Should have selection options for the collection button

Would be handy to have a collection_single (for example) button type which is active only when a single row is selected.

PDF logo

Not really an issue but more a request.

It would be great to be able to add your own logo to the generated PDF.
Similiar to sPdfMessage, sPdfLogo could be added that excepts an URL to the logo to include at the top of the first page in the generated PDF.

Cannot read property '_DTTT_selected' of undefined

TableTools throws exception if there is no rows and I try to select row with text: "No matching recrods found".

Step to reproduce:

1. Open http://next.datatables.net/release-datatables/extensions/TableTools/examples/select_single.html
2. Type xxxx in search textbox
3. Click on the row with the text: "No matching records found"

Add support for oLanguage defaults in TableTools

Hello,

I know this is a common question in the forums, so it would be nice to track this through GitHub. As you said, TableTools will be enhanced in version 3.0, and I think this feature should be included in it.

DataTables has a roadmap published (http://www.datatables.net/development/roadmap), but there is no one for TableTools, so we don't know if you marked this to do it in the future.

Maybe you have already started to develop the new version, because you said this would be done after DataTables 1.10 (1.10.2 now) and Editor 1.3 (1.3.3 now) were published.

Thanks Allan!

Allan Please help Custom PDF and CSV

hello allan,
i had created an issue before asking that you kindly help me with the steps to add an image letterhead to the swf for pdf and csv export,you commented that i would have to create a forum on your official site and it runs with alivepdf, i have created 2 forums on your site on the same issue and you didn't respond,i also checked alivepdf documention and i couldn't a way to do it,PLEASE I AM PLEADING KINDLY HELP ME I'VE BEEN ON THIS FOR A MONTH+ no online forum has helped me and i have been searching,i would appreciate if you don't ignore this issue or close it and kindly give me some step by step tutorial to do this,thanks in advance!.

Add class to td when selected

Hello,

It would be nice if when a row is selected, the class .DTTT_selected (or other) would be applied to the clicked cell (td) too. This way, it would be possible to get the cell clicked exactly from function fnRowSelected.

Thanks!

Unicode text in PDF

Generated PDF for unicode texts, will be fail.
If you use this table:

a b

test سلام

The output PDF will be:

a b

test ????

Copy to clipboard message is hardcoded

"Table copied

Copied [ X ] rows to the clipboard."

That message is hardcoded in the .js file, could be useful to have it configurable as the Print message is in the "sInfo" var:

"sInfo": "<h6>Table copied</h6><p>Copied * rows</p>"

...or something like that.

Add mDeselectColumns or fnDeselectCell

Hi,

I'm trying to export the content of a table which first column cells have only a checkbox input. So, I would like to exclude that first column of exportation.

However, that's not that easy as mColumns: [1, 2], because from the rest of columns I only want the visible ones to get exported and, as far as I know, I can't use both mColumns string and array notation at the same time.

For my purpose I would need a mDeselectColumns to do something like that:

mColumns: 'visible',
mDeselectColumns: [0]

I think my situation may be quite common, because a lot of CRUD generator automatically create that kind of action columns, and if you want to add some other dynamism as column hiding I think right now you don't have a way to go.

Thanks a lot for this amazing plugin!

[DOC] Typo "is a" should be "if a"

As shown:

I could not find the source file to edit it and form a PT :(

Use JSON for JS / AS PDF information

The current \n delimited information used to tell the PDF generator what to do is too limiting. Should use JSON or something a bit more flexible.

Related: http://datatables.net/forums/discussion/15513/_fnhtmldecode-converts-039r039-to-039n039

Bug in Opera: No return after copy-button and its popup-message

Hi there!

This issue is copied from the DT forums [0], where "Rockb" posted it on July 1st.
Today I ran into the same problem and couldn't find a fix.
I will be very happy if you can fix it. - Thanks! :)

[0] http://www.datatables.net/forums/discussion/5592/

"After pressing the button to copy all rows there popup a message like "43 rows copied..."

So far so good... but in Opera (11.5) there is no return to the normal screen.
It remains the gray background screen, AND there is no possibility like 'escape' or a 'click' somewhere on the screen to avoid this error. Only a refresh helps.

My "copy"-button is placed in a "collection" - so (BEFORE) it's alredy in grey background-modus."

Print Large Ajax Loaded DataTable

The print only has 4 pages and the Scroll Body height is set to 5131px. To show all of my rows (around 1,800) the height should be about 59630px.

Any ideas how I can get this to print?

Message when copying to clipboard is an alert() instead of nicely styled message (as in TableTools 1)

Repro: Click on the copy button. You'll get a basic alert message telling you that rows have been copied to the clipboard. In TableTools 1, you got a nicely styled message just like the print button.

Not sure why was this behaviour changed in TableTools 2, but I prefer the previous implementation.

File extension for TableTools.BUTTONS.xls is csv instead of xls

I think this is a regression from TT 1. Shouldn't this be .xls?
https://github.com/DataTables/TableTools/blob/RELEASE_2_0_1/media/js/TableTools.js#L2063

IE Crashes on CSV/-Excel Export

When exporting csv or csv(excel) then IE crashes (FF and Safari work fine).

We use a checkout from 30.11.

---

From the Windows EventViewer: (If you need something more translated let me know)

Name der fehlerhaften Anwendung: iexplore.exe, Version: 9.0.8112.16421, Zeitstempel: 0x4d76255d
Name des fehlerhaften Moduls: Flash11e.ocx, Version: 11.1.102.55, Zeitstempel: 0x4eaf89fc
Ausnahmecode: 0xc0000005 //ExceptionCode
Fehleroffset: 0x001cf3c5 //Erroroffset
ID des fehlerhaften Prozesses: 0x9960
Startzeit der fehlerhaften Anwendung: 0x01ccb0d401f18a7d
Pfad der fehlerhaften Anwendung: C:\Program Files (x86)\Internet Explorer\iexplore.exe
Pfad des fehlerhaften Moduls: C:\Windows\SysWOW64\Macromed\Flash\Flash11e.ocx
Berichtskennung: fef060ba-1cca-11e1-9cb9-005056c00008

CSV doesn't trigger download

Hi,

I just downloaded and implemented the latest version of TableTools and am having trouble getting the CSV button/link to work.

It shows up fine and I am able to get almost everything working, but when I click on the button, nothing happens. I don't have any 404 or JS errors, I have the SWF files correctly linked and specified in my init, and have the ZeroClipboard.js included as well.

I wasn't sure if I need the "as" directory also as I couldn't find a readme.md or instructions on what I needed to include to get everything working.

Let me know if anybody can help out with this.

Also, I checked out the repo and the example pages seem to be missing CSS/JS files as well as incorrect paths to files. If this could get working, that could probably help a bunch in me debugging my code.

Thanks!

Ted

Tabletools install procedure

Hi all!

Where should I decompress tabletools files?

What should I do next?

Thanks