TableExport
The simple, easy-to-implement library to export HTML tables to xlsx, xls, csv, and txt files.
Install / Use
/learn @clarketm/TableExportREADME
Docs
- Migrating from 3.x to 4.x?
- Migrating from 4.x to 5.x?
v3docs and README:v4docs and README:v5docs and README (below):
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:
<script src="FileSaver.js"></script>
...
<script src="tableexport.js"></script>
Install with Bower
$ bower install tableexport.js
Install with npm
$ npm install tableexport
CDN
unpkg
| | uncompressed | compressed | | :--------: | :----------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | CSS | 🔗 | 🔗 | | JS | 🔗 | 🔗 | | Images | — | 🔗<sup>xlsx</sup>🔗<sup>xls</sup>🔗<sup>csv</sup>🔗<sup>txt</sup> |
Dependencies
Required:
Optional:
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.jsis NOT necessary if installing withBowerornpm
<script src="xlsx.core.js"></script>
<script src="FileSaver.js"></script>
...
<script src="tableexport.js"></script>
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.jsis NOT necessary if installing withBowerornpm
<script src="Blob.js"></script>
<script src="FileSaver.js"></script>
...
<script src="tableexport.js"></script>
Usage
JavaScript
To use this library, simple call the TableExport constructor:
new TableExport(document.getElementsByTagName("table"));
// OR simply
TableExport(document.getElementsByTagName("table"));
// OR using jQuery
$("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 filetype(s) of your choice.
/* Defaults */
TableExport(document.getElementsByTagName("table"), {
headers: true, // (Boolean), display table headers (th or td elements) in the <thead>, (default: true)
footers: true, // (Boolean), display table footers (th or td elements) in the <tfoot>, (default: false)
formats: ["xlsx", "csv", "txt"], // (String[]), filetype(s) for the export, (default: ['xlsx', 'csv', 'txt'])
filename: "id", // (id, String), filename for the downloaded file, (default: 'id')
bootstrap: false, // (Boolean), style buttons using bootstrap, (default: true)
exportButtons: true, // (Boolean), automatically generate the built-in export buttons for each of the specified formats (default: true)
position: "bottom", // (top, bottom), position of the caption element relative to table, (default: 'bottom')
ignoreRows: null, // (Number, Number[]), row indices to exclude from the exported file(s) (default: null)
ignoreCols: null, // (Number, Number[]), column indices to exclude from the exported file(s) (default: null)
trimWhitespace: true, // (Boolean), remove all leading/trailing newlines, spaces, and tabs from cell text in the exported file(s) (default: false)
RTL: false, // (Boolean), set direction of the worksheet to right-to-left (default: false)
sheetname: "id" // (id, String), sheet name for the exported spreadsheet, (default: 'id')
});
Note: to use the
xlsxfiletype, you must include js-xlsx; reference theAdd-Onssection.
Properties
headersfootersformatsfilenamebootstrapexportButtonspositionignoreRowsignoreColstrimWhitespaceRTLsheetname
Methods
TableExport supports additional methods (getExportData, update, reset and remove) to control the TableExport instance after creation.
/* First, call the `TableExport` constructor and save the return instance to a variable */
var table = TableExport(document.getElementById("export-buttons-table"));
getExportData
/* get export data */
var exportData = table.getExportData(); // useful for creating custom export buttons, i.e. when (exportButtons: false)
/*****************
** exportData ***
*****************
{
"export-buttons-table": {
xls: {
data: "...",
fileExtension: ".xls",
filename: "export-buttons-table",
mimeType: "application/vnd.ms-excel"
},
...
}
};
*/
export2file
/* convert export data to a file for download */
var exportData = table.getExportData();
var xlsxData = exportData.table.xlsx; // Replace with the kind of file you want from the exportData
table.export2file(xlsxData.data, xlsxData.mimeType, xlsxData.filename, xlsxData.fileExtension, xlsxData.merges, xlsxData.RTL, xlsxData.sheetname)
getFileSize
var tableId = "export-buttons-table";
var XLS = table.CONSTANTS.FORMAT.XLS;
/* get export data (see `getExportData` above) */
var exportDataXLS = table.getExportData()[tabl
Related Skills
node-connect
338.0kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
83.4kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
338.0kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
commit-push-pr
83.4kCommit, push, and open a PR
