tableexport
Advanced tools
The simple, easy-to-implement plugin to export HTML tables to xlsx, xls, csv, and txt files
The simple, easy-to-implement plugin to export HTML tables to xlsx, xls, csv, and txt files
To use this plugin, include the jQuery library, FileSaver.js script, and TableExport.js plugin before the closing <body> tag of your HTML document:
<script src="jquery.js"></script>
<script src="FileSaver.js"></script>
...
<script src="tableexport.js"></script>
$ bower install tableexport.js
$ npm install tableexport
| uncompressed | compressed | |
|---|---|---|
| CSS | 🔗 | 🔗 |
| JS | 🔗 | 🔗 |
| Images | — | 🔗xlsx🔗xls🔗csv🔗txt |
*
*jQuery dependency requirement is removed as of 4.0.0-alpha.1
In order to provide Office Open XML SpreadsheetML Format ( .xlsx ) support, you must include the following third-party script to your project before FileSaver.js and TableExport.js.
<script src="xls.js"></script>
<script src="FileSaver.js"></script>
...
<script src="tableexport.js"></script>
To support older browsers ( Chrome < 20, Firefox < 13, Opera < 12.10, IE < 10, Safari < 6 ) include the Blob.js polyfill before the FileSaver.js script.
Until Safari provides native support for either the HTML5 download attribute or service workers, limited xlx and xlsx support is provided by including the Blob.js polyfill, albeit the filename will always be labeled Unknown.
<script src="xls.js"></script>
<script src="Blob.js"></script>
<script src="FileSaver.js"></script>
...
<script src="tableexport.js"></script>
By default, TableExport.js utilizes the Bootstrap CSS framework to deliver enhanced table and button styling. For non-Bootstrap projects, initialize with the bootstrap property set to false.
$("table").tableExport({
bootstrap: false
});
When used along with Bootstrap, there are four custom classes .xlsx, .xls, .csv, .txt providing button styling for each of the exportable filetypes.
To use the export plugin, just call:
$("table").tableExport();
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 filetypes of your choice.
/* Defaults */
$("table").tableExport({
headings: true, // (Boolean), display table headings (th/td elements) in the <thead>
footers: true, // (Boolean), display table footers (th/td elements) in the <tfoot>
formats: ["xls", "csv", "txt"], // (String[]), filetype(s) for the export
fileName: "id", // (id, String), filename for the downloaded file
bootstrap: true, // (Boolean), style buttons using bootstrap
position: "bottom", // (top, bottom), position of the caption element relative to table
ignoreRows: null, // (Number, Number[]), row indices to exclude from the exported file
ignoreCols: null, // (Number, Number[]), column indices to exclude from the exported file
ignoreCSS: ".tableexport-ignore" // (selector, selector[]), selector(s) to exclude cells from the exported file
emptyCSS: ".tableexport-empty" // (selector, selector[]), selector(s) to replace cells with an empty string in the exported file
});
Note: to use the xlsx filetype, you must include the third-party scripts listed in the Dependencies section.
TableExport supports additional methods (update, reset and remove) to control it after creation.
/* Run plugin and save it to a variable */
var tables = $("table").tableExport();
/* update */
tables.update({
filename: "newFile" // pass in a new set of properties
});
/* reset */
tables.reset(); // useful for a dynamically altered table
/* remove */
tables.remove(); // removes caption and buttons
A table of available properties and their usage can be found here
A table of available methods and their usage can be found here
Each button is assigned a default class and default content based on its respective filetype and corresponding css styles.
/* default class, content, and separator for each export type */
/* Excel Open XML spreadsheet (.xlsx) */
$.fn.tableExport.xlsx = {
defaultClass: "xlsx",
buttonContent: "Export to xlsx",
mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
fileExtension: ".xlsx"
};
/* Excel Binary spreadsheet (.xls) */
$.fn.tableExport.xls = {
defaultClass: "xls",
buttonContent: "Export to xls",
separator: "\t",
mimeType: "application/vnd.ms-excel",
fileExtension: ".xls"
};
/* Comma Separated Values (.csv) */
$.fn.tableExport.csv = {
defaultClass: "csv",
buttonContent: "Export to csv",
separator: ",",
mimeType: "application/csv",
fileExtension: ".csv"
};
/* Plain Text (.txt) */
$.fn.tableExport.txt = {
defaultClass: "txt",
buttonContent: "Export to txt",
separator: " ",
mimeType: "text/plain",
fileExtension: ".txt"
};
Below are additional defaults to support the functionality of the plugin that.
/* default charset encoding (UTF-8) */
$.fn.tableExport.charset = "charset=utf-8";
/* default filename if "id" attribute is set and undefined */
$.fn.tableExport.defaultFileName = "myDownload";
/* default class to style buttons when not using bootstrap */
$.fn.tableExport.defaultButton = "button-default";
/* bootstrap classes used to style and position the export buttons */
$.fn.tableExport.bootstrap = ["btn", "btn-default", "btn-toolbar"];
/* row delimeter used in all filetypes */
$.fn.tableExport.rowDel = "\r\n";
| Chrome | Firefox | IE | Opera | Safari * | |
|---|---|---|---|---|---|
| Android | ✓ | ✓ | - | ✓ | - |
| iOS | ✓ | - | - | - | ✓ |
| Mac OSX | ✓ | ✓ | - | ✓ | ✓ |
| Windows | ✓ | ✓ | ✓ | ✓ | ✓ |
*only partial support for xls and xlsx: requires third-party dependency (Blob.js)
A live, interactive demo can be found here. Also, check out the TableExport + RequireJS skeleton,
TableExport.js is licensed under the terms of the MIT License
FAQs
The simple, easy-to-implement library to export HTML tables to xlsx, xls, csv, and txt files
The npm package tableexport receives a total of 2,091 weekly downloads. As such, tableexport popularity was classified as popular.
We found that tableexport demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.