What's new

Tabulator & SheetJS - Grouped column title not displaying correctly on download

Fever

Active member
Staff member
When I download a xlsx file the title of the column 'Progress' goes behind the first merged column 'Name', I tried everything I could find but with no success. Does anyone have a solution for this? Already asked on Tabulator's Github but they closed it and suggested that I should ask here instead - gonna ask on SheetJS Github as well but if someone had this same issue before and found a solution it's going to be really helpful.

Working fiddle: https://jsfiddle.net/millamanjko/qxk4fbam/4/


var tabledata = [{
id: 1,
name: "Billy Bob",
progress: 12,
gender: "male",
rating: 95,
col: "red",
dob: "14/05/2010"
},
{
id: 2,
name: "Jenny Jane",
progress: 42,
gender: "female",
rating: 142,
col: "blue",
dob: "30/07/1954"
},
{
id: 3,
name: "Steve McAlistaire",
progress: 35,
gender: "male",
rating: 176,
col: "green",
dob: "04/11/1982"
},
];

var table1 = new Tabulator("#example-table1", {
data: tabledata,
downloadConfig: {
columnGroups: true, //include column groups in column headers for download
},
columns: [{
title: "Name",
downloadTitle: "Name-download",
field: "name",
width: 160
},
{ //create column group
title: "Work Info",
columns: [{
title: "Progress",
field: "progress",
align: "right",
sorter: "number",
width: 100
},
{
title: "Rating",
field: "rating",
align: "center",
width: 80
},
],
},
{ //create column group
title: "Personal Info",
columns: [{
title: "Gender",
field: "gender",
width: 90
},
{
title: "Favourite Color",
field: "col",
width: 140
},
{
title: "Date Of Birth",
field: "dob",
align: "center",
sorter: "date",
width: 130
},
],
},
],
});


$("#download-xlsx1").click(function() {
table1.download("xlsx", "data.xlsx", {
sheetName: "My Data"
});
});

<script src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.2.7/css/tabulator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.2.7/js/tabulator.min.js"></script>


<button id="download-xlsx1">download xlsx file</button>
<div id="example-table1"></div>

Continue reading...
 
Top