Hi there,
I've got a table and it's fairly wide. Because of its width, we've chosen to combine some of the data. For example, the Address, City, State, and Zip variables are all presented in the same column:
[Address]
[City], [State] [Zip]
and similar for the daytime and evening phone numbers.
However, our users want those to be separate columns when they export to Excel or CSV.
At the moment, I'm handling it using the orthogonal attribute:
var spreadsheetOptions = {
columns: [
[...]
'address:name',
'city:name',
'state:name',
'postal:name',
'workPhone:name',
'homePhone:name',
[...]
],
rows: { selected: true },
orthogonal: 'export'
};
[...]
var t = $('table').DataTable({
[...]
columns: [
[...]
{
// Show Address<br/>City, State Zip on page/print,
// just street address on spreadsheet export
title: 'Address',
name: 'address',
data: {
'_': function(data, type) {
return type === 'export'
? data.address
: data.address + ' <br/>' + data.city + ', ' + data.state + ' ' + data.postal;
},
sort: 'postal'
},
className: 'address'
},{
// City column for spreadsheet export
title: 'City',
name: 'city',
data: 'city',
className: 'hidden-modal',
visible: false
},{
// State column for spreadsheet export
title: 'State',
name: 'state',
data: 'state',
className: 'hidden-modal',
visible: false
},{
// Zip column for spreadsheet export
title: 'Zip',
name: 'postal',
data: 'postal',
className: 'hidden-modal',
visible: false
},{
// Show Day<br/>Evening phone number as links on page/print
title: 'Day<span class="visible-modal-inline">:</span> <br />Evening',
name: 'phone',
data: function(data) {
var phones = '-';
if(data.workPhone) {
var phoneLink = parsePhoneLink(data.workPhone),
phoneDisplay = parsePhoneDisplay(data.workPhone);
phones = '<a href="tel:' + phoneLink + '">' + phoneDisplay + '</a>';
}
phones += ' <br/>';
if(data.homePhone) {
var phoneLink = parsePhoneLink(data.homePhone),
phoneDisplay = parsePhoneDisplay(data.homePhone);
phones += '<a href="tel:' + phoneLink + '">' + phoneDisplay + '</a>';
} else {
phones += '-';
}
return phones;
},
className: 'phone' // no num-fmt because sometimes '-'; should center-align
},{
// Daytime Phone column for spreadsheet export
title: 'Daytime Phone',
name: 'workPhone',
data: function(data, type) {
if(type === 'export' && data.workPhone) {
return parsePhoneDisplay(data.workPhone);
}
return '-';
},
visible: false,
className: 'hidden-modal'
},{
// Evening Phone column for spreadsheet export
title: 'Evening Phone',
name: 'homePhone',
data: function(data, type) {
if(type === 'export' && data.homePhone) {
return parsePhoneDisplay(data.homePhone);
}
return '-';
},
visible: false,
className: 'hidden-modal'
}
[...]
],
[...]
buttons: [{
extend: 'excel',
exportOptions: spreadsheetOptions
},{
extend: 'csv',
exportOptions: spreadsheetOptions
}]
});
The downside to this approach is that I'm reading the city, state, postal, workPhone, and homePhone values in twice, and adding them all to the DataTables object in two different places. This has a noticeable impact on performance for larger tables (and some of our users have thousands of rows in their tables).
Is there another way of doing this? Is there a way I can read those values in once, and then combine multiple values into a single column in the browser but put them in separate columns on export?
Thanks.
