TableExport

Search…
TableExport
The simple, easy-to-implement library to export HTML tables to xlsx, xls, csv, and txt files.
​​
​ ​
​ ​
​ ​
​​
Docs
​Migrating from 3.x to 4.x?​
​Migrating from 4.x to 5.x?​
​v3 docs and README:
​v4 docs and README:
​v5 docs and README:
Getting Started
Install manually using <script> tags
To use this library, include the FileSaver.js library, and TableExport library before the closing <body> tag of your HTML document:
1
<script src="FileSaver.js"></script>
2
...
3
<script src="tableexport.js"></script>
Copied!
Install with Bower
1
$ bower install tableexport.js
Copied!
Install with npm
1
$ npm install tableexport
Copied!
CDN
​
uncompressed
compressed
CSS
​🔗​
​🔗​
JS
​🔗​
​🔗​
Images
—
​🔗xlsx​🔗xls​🔗csv​🔗txt​
Dependencies
Required:
​FileSaver.js​
Optional:
​jQuery (1.2.1 or higher)
​Bootstrap (3.1.0 or higher)
Add-Ons:
In order to provide Office Open XML SpreadsheetML Format ( .xlsx ) support, you must include the following third-party library in your project before both FileSaver.js and TableExport.
​xlsx.core.js by SheetJS
Including xlsx.core.js is NOT necessary if installing with Bower or npm​
1
<script src="xlsx.core.js"></script>
2
<script src="FileSaver.js"></script>
3
...
4
<script src="tableexport.js"></script>
Copied!
Older Browsers:
To support legacy browsers ( Chrome < 20, Firefox < 13, Opera < 12.10, IE < 10, Safari < 6 ) include the Blob.js polyfill before the FileSaver.js script.
​Blob.js by eligrey (forked by clarketm)
Including Blob.js is NOT necessary if installing with Bower or npm​
1
<script src="Blob.js"></script>
2
<script src="FileSaver.js"></script>
3
...
4
<script src="tableexport.js"></script>
Copied!
Usage
JavaScript
To use this library, simple call the TableExport constructor:
1
new TableExport(document.getElementsByTagName("table"));
2
​
3
// OR simply
4
​
5
TableExport(document.getElementsByTagName("table"));
6
​
7
// OR using jQuery
8
​
9
$("table").tableExport();
Copied!
Additional properties can be passed-in to customize the look and feel of your tables, buttons, and exported data.
Notice that by default, TableExport will create export buttons for three different filetypes xls, csv, txt. You can choose which buttons to generate by setting the formats property to the filetype(s) of your choice.
1
/* Defaults */
2
TableExport(document.getElementsByTagName("table"), {
3
  headers: true,                      // (Boolean), display table headers (th or td elements) in the <thead>, (default: true)
4
  footers: true,                      // (Boolean), display table footers (th or td elements) in the <tfoot>, (default: false)
5
  formats: ["xlsx", "csv", "txt"],    // (String[]), filetype(s) for the export, (default: ['xlsx', 'csv', 'txt'])
6
  filename: "id",                     // (id, String), filename for the downloaded file, (default: 'id')
7
  bootstrap: false,                   // (Boolean), style buttons using bootstrap, (default: true)
8
  exportButtons: true,                // (Boolean), automatically generate the built-in export buttons for each of the specified formats (default: true)
9
  position: "bottom",                 // (top, bottom), position of the caption element relative to table, (default: 'bottom')
10
  ignoreRows: null,                   // (Number, Number[]), row indices to exclude from the exported file(s) (default: null)
11
  ignoreCols: null,                   // (Number, Number[]), column indices to exclude from the exported file(s) (default: null)
12
  trimWhitespace: true,               // (Boolean), remove all leading/trailing newlines, spaces, and tabs from cell text in the exported file(s) (default: false)
13
  RTL: false,                         // (Boolean), set direction of the worksheet to right-to-left (default: false)
14
  sheetname: "id"                     // (id, String), sheet name for the exported spreadsheet, (default: 'id')
15
});
Copied!
Note: to use the xlsx filetype, you must include js-xlsx; reference the Add-Ons section.
Properties
​headers​
​footers​
​formats​
​filename​
​bootstrap​
​exportButtons​
​position​
​ignoreRows​
​ignoreCols​
​trimWhitespace​
​RTL​
​sheetname​
Methods
TableExport supports additional methods (getExportData, update, reset and remove) to control the TableExport instance after creation.
1
/* First, call the `TableExport` constructor and save the return instance to a variable */
2
var table = TableExport(document.getElementById("export-buttons-table"));
Copied!
​getExportData​
1
/* get export data */
2
var exportData = table.getExportData(); // useful for creating custom export buttons, i.e. when (exportButtons: false)
3
​
4
/*****************
5
 ** exportData ***
6
 *****************
7
{
8
    "export-buttons-table": {
9
        xls: {
10
            data: "...",
11
            fileExtension: ".xls",
12
            filename: "export-buttons-table",
13
            mimeType: "application/vnd.ms-excel"
14
        },
15
        ...
16
    }
17
};
18
*/
Copied!
​getFileSize​
1
var tableId = "export-buttons-table";
2
var XLS = table.CONSTANTS.FORMAT.XLS;
3
​
4
/* get export data (see `getExportData` above) */
5
var exportDataXLS = table.getExportData()[tableId][XLS];
6
​
7
/* get file size (bytes) */
8
var bytesXLS = table.getFileSize(exportDataXLS.data, exportDataXLS.fileExtension);
9
​
10
/**********************************
11
 ** bytesXLS (file size in bytes)
12
 **********************************
13
352
14
*/
Copied!
​update​
1
/* update */
2
table.update({
3
  filename: "newFile" // pass in a new set of properties
4
});
Copied!
​reset​
1
/* reset */
2
table.reset(); // useful for a dynamically altered table
Copied!
​remove​
1
/* remove */
2
table.remove(); // removes caption and buttons
Copied!
Settings
Below are some of the popular configurable settings to customize the functionality of the library.
​ignoreCSS​
1
/**
2
 * CSS selector or selector[] to exclude/remove cells (<td> or <th>) from the exported file(s).
3
 * @type {selector|selector[]}
4
 * @memberof TableExport.prototype
5
 */
6
​
7
// selector
8
TableExport.prototype.ignoreCSS = ".tableexport-ignore";
9
​
10
// selector[]
11
TableExport.prototype.ignoreCSS = [".tableexport-ignore", ".other-ignore-class"];
12
​
13
// OR using jQuery
14
​
15
// selector
16
$.fn.tableExport.ignoreCSS = ".tableexport-ignore";
17
​
18
// selector[]
19
$.fn.tableExport.ignoreCSS = [".tableexport-ignore", ".other-ignore-class"];
Copied!
​emptyCSS​
1
/**
2
 * CSS selector or selector[] to replace cells (<td> or <th>) with an empty string in the exported file(s).
3
 * @type {selector|selector[]}
4
 * @memberof TableExport.prototype
5
 */
6
​
7
// selector
8
TableExport.prototype.emptyCSS = ".tableexport-empty";
9
​
10
// selector[]
11
TableExport.prototype.emptyCSS = [".tableexport-empty", ".other-empty-class"];
12
​
13
// OR using jQuery
14
​
15
// selector
16
$.fn.tableExport.emptyCSS = ".tableexport-empty";
17
​
18
// selector[]
19
$.fn.tableExport.emptyCSS = [".tableexport-empty", ".other-empty-class"];
Copied!
1
/* default charset encoding (UTF-8) */
2
TableExport.prototype.charset = "charset=utf-8";
3
​
4
/* default `filename` property if "id" attribute is unset */
5
TableExport.prototype.defaultFilename = "myDownload";
6
​
7
/* default class to style buttons when not using Bootstrap or the built-in export buttons, i.e. when (`bootstrap: false` & `exportButtons: true`)  */
8
TableExport.prototype.defaultButton = "button-default";
9
​
10
/* Bootstrap classes used to style and position the export button, i.e. when (`bootstrap: true` & `exportButtons: true`) */
11
TableExport.prototype.bootstrapConfig = ["btn", "btn-default", "btn-toolbar"];
12
​
13
/* row delimeter used in all filetypes */
14
TableExport.prototype.rowDel = "\r\n";
Copied!
1
/**
2
 * Format-specific configuration (default class, content, mimeType, etc.)
3
 * @memberof TableExport.prototype
4
 */
5
formatConfig: {
6
    /**
7
     * XLSX (Open XML spreadsheet) file extension configuration
8
     * @memberof TableExport.prototype
9
     */
10
    xlsx: {
11
        defaultClass: 'xlsx',
12
        buttonContent: 'Export to xlsx',
13
        mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
14
        fileExtension: '.xlsx'
15
    },
16
    xlsm: {
17
        defaultClass: 'xlsm',
18
        buttonContent: 'Export to xlsm',
19
        mimeType: 'application/vnd.ms-excel.sheet.macroEnabled.main+xml',
20
        fileExtension: '.xlsm'
21
    },
22
    xlsb: {
23
        defaultClass: 'xlsb',
24
        buttonContent: 'Export to xlsb',
25
        mimeType: 'application/vnd.ms-excel.sheet.binary.macroEnabled.main',
26
        fileExtension: '.xlsb'
27
    },
28
    /**
29
     * XLS (Binary spreadsheet) file extension configuration
30
     * @memberof TableExport.prototype
31
     */
32
    xls: {
33
        defaultClass: 'xls',
34
        buttonContent: 'Export to xls',
35
        separator: '\t',
36
        mimeType: 'application/vnd.ms-excel',
37
        fileExtension: '.xls',
38
        enforceStrictRFC4180: false
39
    },
40
    /**
41
     * CSV (Comma Separated Values) file extension configuration
42
     * @memberof TableExport.prototype
43
     */
44
    csv: {
45
        defaultClass: 'csv',
46
        buttonContent: 'Export to csv',
47
        separator: ',',
48
        mimeType: 'text/csv',
49
        fileExtension: '.csv',
50
        enforceStrictRFC4180: true
51
    },
52
    /**
53
     * TXT (Plain Text) file extension configuration
54
     * @memberof TableExport.prototype
55
     */
56
    txt: {
57
        defaultClass: 'txt',
58
        buttonContent: 'Export to txt',
59
        separator: '  ',
60
        mimeType: 'text/plain',
61
        fileExtension: '.txt',
62
        enforceStrictRFC4180: true
63
    }
64
},
65
​
66
//////////////////////////////////////////
67
// Configuration override example
68
//////////////////////////////////////////
69
​
70
/* Change the CSV (Comma Separated Values) `mimeType` to "application/csv" */
71
TableExport.prototype.formatConfig.xlsx.mimeType = "application/csv"
Copied!
CSS
​TableExport packages with customized Bootstrap CSS stylesheets to deliver enhanced table and button styling. These styles can be enabled by initializing with the bootstrap property set to true.
1
TableExport(document.getElementsByTagName("table"), {
2
  bootstrap: true
3
});
Copied!
When used alongside Bootstrap, there are four custom classes .xlsx, .xls, .csv, .txt providing button styling for each of the exportable filetypes.
Browser Support
​
Chrome
Firefox
IE
Opera
Safari
Android
✓
✓
-
✓
-
iOS
✓
-
-
-
✓
Mac OSX
✓
✓
-
✓
✓
Windows
✓
✓
✓
✓
✓
A full list of browser support can be found in the FileSaver.js README. Some legacy browsers may require an additional third-party dependency: Blob.js​
Examples
Customizing Properties
​headers​
​footers​
​formats​
​filename​
​bootstrap​
​exportButtons​
​position​
​ignoreRows​
​ignoreCols​
​trimWhitespace​
​RTL​
​sheetname​
Customizing Settings
​ignoreCSS​
​emptyCSS​
Miscellaneous
​rowspan​
​colspan​
​cell data types (string, number, boolean, date)
​emoji​
​Arabic​
Skeletons
​TableExport + RequireJS skeleton.
​TableExport + Flask skeleton.
​TableExport + Webpack 1 skeleton.
​TableExport + Angular 4 + Webpack 2 skeleton.
License
​TableExport is licensed under the terms of the Apache-2.0 License
Going Forward
TODOs
Update JSDocs and TypScript definition file.
Fix bug with CSV and TXT ignoreRows and ignoreCols (rows/cols rendered as empty strings rather than being removed).
Reimplement and test the update, reset, and remove TableExport prototype properties without requiring jQuery.
Make jQuery as peer dependency and ensure proper TableExport rendering in browser, AMD, and CommonJS environments.
Force jQuery to be an optionally loaded module.
Use the enhanced SheetJS xls, csv, and txt formats (exposed via enforceStrictRFC4180 prototype property).
Allow ignoreCSS and emptyCSS to work with any selector|selector[] instead of solely a single CSS class.
Ensure (via testing) full consistency and backwards-compatibility for jQuery.
Add Export as PDF support.
Credits
Special thanks the the following contributors:
​SheetJS - js-xlsx
​Eli Grey - FileSaver.js & Blob.js