Three ways (and one legacy way) to perform detailed customization of data being exported from DataTables to targets such as Excel, PDF, etc.
- The first way gives you access to the contents of each DataTable cell being exported.
- The second way gives you access to the relevant object for the export target.
- The third way uses orthogonal data.
(The fourth way is included for legacy information only – but may still be useful in some situations.)
Format the Source Data Cells
This is useful for formatting the raw data of each cell in your datatable, or accessing additional HTML element and attribute data which may be in each cell’s node.
See the export data options. There are three sections which can be formatted – the data is:
format.headerformat.bodyformat.footer
Example: Write contents of <input> fields in a DataTable to output Excel, to capture user-provided data:
$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
exportOptions: {
format: {
body: function ( inner, rowidx, colidx, node ) {
if ($(node).children("input").length > 0) {
return $(node).children("input").first().val();
} else {
return inner;
}
}
}
}
}
]
});
});Customize the Exported Data Object
This is useful for performing more advanced customizations of the output (e.g. the Excel file or PDF file), which can’t be performed any other way.
The object you get depends on the export target.
| Target | Notes |
|---|---|
| CSV | The CSV data as a single string, including newlines, etc. |
| Excel | An object containing the XML files in the ZIP file structure used by Excel. You need to understand that zip structure to manipulate its data. |
| An object containing the PDFMake document structure. | |
| copy | The data to be copied, as a string. |
The window object for the new window. As such the document body can be accessed using window.document.body and manipulated using jQuery and DOM methods. |
See here for a full list of the different export targets.
Excel example to format the output with a thin black border on each cell:
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
customize: function ( xlsx, btn, tbl ) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$( 'row c', sheet ).attr( 's', '25' );
}
}
]
} );
} );PDF example to change the font (see full details here for how to build your own vfs_fonts.js file):
$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [{
extend: 'pdf',
customize: function ( doc ) {
processDoc(doc);
}
}]
});
});
function processDoc(doc) {
//
// https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/
//
// Update pdfmake's global font list, using the fonts available in
// the customized vfs_fonts.js file (do NOT remove the Roboto default):
pdfMake.fonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-MediumItalic.ttf'
},
arial: {
normal: 'arial.ttf',
bold: 'arial.ttf',
italics: 'arial.ttf',
bolditalics: 'arial.ttf'
}
};
// modify the PDF to use a different default font:
doc.defaultStyle.font = "arial";
var i = 1;
}Use Orthogonal Data
DataTables can use the orthogonal option when expoting data:
What orthogonal data type to request when getting the data for a cell.
An example which strips the leading dollar sign from salary values:
Sample data:
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>The code:
var table = $('#example').DataTable( {
dom: 'Brftip',
columnDefs: [
{
targets: [5],
render: function (data, type, row) {
return type === 'export' ? data.substring(1) : data;
}
}
],
buttons: [ {
text: 'CSV',
extend: 'csvHtml5',
name: 'testExport',
exportOptions: {
orthogonal: 'export'
}
} ]
} );You can use whatever label you like instead of 'export'.
The end result is CSV data as follows:
"Tiger Nixon","System Architect","Edinburgh","61","2011/04/25","320,800"
Customize the Exported Data Arrays
Another export data option, similar to the above example, but this one provides the data after all of it has been gathered and pre-processed by all other formatting options:
customizeData
This is described in a DataTables forum comment as follows:
The customizeData option is a bit of a legacy hack. It was put in place before the Excel export buttons had a customize callback and it was the only way to modify the output data.
Data is provided in arrays:
header (array)body (2-dimensional array)footer (array)
No example given, as this is probably less useful compared to the other approaches shown above.
