Exporting To Excel

An example of my output is attached. I have modified the data since it is confidential but the layout is exactly as exported. As you can see, the header and footer are right aligned and the cells are not completely merged to match the data.

I cannot include the actual data since it is confidential. Here is my component definition in case something in the configuration is impacting the export.
 
var flex_dataTable = new Flexmonster({
container: "tableDiv_Table",
componentFolder: "COMPONENT_FOLDER",
toolbar: true,
beforetoolbarcreated: customizeToolbar,
customizeCell: customizeCellFunction,
width: "100%",
height: "800",
global: {
localization: {
"grid": {
"blankMember": ""
}
}
},
report: {
dataSource: {
data: fmTable_data
},
options: {
grid: {
type: "classic",
showTotals: "off",
showGrandTotals: "off",
},
showAggregationLabels: false,
},
formats: [
{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 3,
maxDecimalPlaces: 3,
maxSymbols: 200,
currencySymbol: "",
currencySymbolAlign: "left",
isPercent: false,
nullValue: "",
infinityValue: "Infinity",
divideByZeroValue: "Infinity",
textAlign: "right"
},
{
name: "percentDisplay",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 3,
maxDecimalPlaces: 3,
maxSymbols: 200,
currencySymbol: "",
currencySymbolAlign: "left",
isPercent: true,
nullValue: "",
infinityValue: "Infinity",
divideByZeroValue: "Infinity",
textAlign: "right"
}
],
slice: {
rows:
[
{ uniqueName: "Customer" },
{ uniqueName: "ShipTo" },
{ uniqueName: "ShipToCityState" },
{ uniqueName: "BomDescription" },
{ uniqueName: "CustomerPartNumber" },
{ uniqueName: "Packaging" },
{ uniqueName: "TermsAndPort" }
],
columns:
[
{ uniqueName: "[Quantity]", "sort": "desc"}
],
measures:
[
{ uniqueName: "CurrentPrice"},
],
expandAll: true,
}
},
licenseKey: "MY_LICENSE_KEY"
});
function exportHandler(params) {
flex_dataTable.exportTo(params.type, params.config)
}
function customizeToolbar(toolbar) {
var tabs = toolbar.getTabs();
toolbar.getTabs = function () {
// remove the connect button
delete tabs[0];
// remove the open button
delete tabs[1];
// remove the save button
delete tabs[2];
// remove the fullscreen button
delete tabs[12];

tabs[3].menu[1].handler = exportHandler;
tabs[3].menu[1].args = {
type: "html",
config: {
filename: "CustomerPriceListReport",
header: "Washington Penn Plastic Co. Inc. - Customer Price List",
footer: "<div>Confidential</div>",
}
}
tabs[3].menu[2].handler = exportHandler;
tabs[3].menu[2].args = {
type: "csv",
config: {
filename: "CustomerPriceListReport",
}
}
tabs[3].menu[3].handler = exportHandler;
tabs[3].menu[3].args = {
type: "excel",
config: {
filename: "CustomerPriceListReport",
header:"Washington Penn Plastic Co. Inc. - Customer Price List",
footer:"Confidential",
excelSheetName: "CustomerPriceList",
}
}
tabs[3].menu[4].handler = exportHandler;
tabs[3].menu[4].args = {
type: "image",
config: {
filename: "CustomerPriceListReport",
header: "Washington Penn Plastic Co. Inc. - Customer Price List",
footer: "<div>Confidential</div>",
}
}
tabs[3].menu[5].handler = exportHandler;
tabs[3].menu[5].args = {
type: "pdf",
config: {
filename: "CustomerPriceListReport",
header: "Washington Penn Plastic Co. Inc. - Customer Price List",
footer: "<div>Confidential</div>",
pageOrientation : "landscape",
}
}
return tabs;
}
}
function customizeCellFunction(cell, data) {
if (data.isGrandTotalRow) cell.addClass("fm-grand-total-r");
if (data.isTotalRow) cell.addClass("fm-total-r");
}

I have repeated the issue in Firefox and Edge.
I recently upgraded to version 2.8.14 but had been using an older version. I was wondering if some of the code is pointing to the older version I still have on the server or in cache. Is the alignment controlled by a stylesheet or is there something in the code I can check to make sure everything is up to date? I know when I first tried the update it still used the old version and I fixed that by changing my include to flexmonster.js?ver=2-8 to insure it loaded the latest version and not a cached copy.

I believe I have found the issue. Since my columns are numeric I wanted them right aligned so I included the following in my stylesheet:
 
/* FlexMonster -> Right Align Column Headers */
#fm-pivot-view .fm-header-c {
text-align: right !important;
}
 
Including this also right aligns the page header and page footer. Do you know of a way for me to right align my column headers without right aligning the page header and footer?
 

Thanks, that option will be very helpful.
One feature request I would like to add is additional control of formatting when exporting data. We are just starting to expand our use of your component and when users export the data they are expecting output like we generate with our other reporting tools. Any additional functionality for formatting the output (options to set font, bold column headers, etc) would be appreciated.

Sorry for not responding. Yes, the example you provided gave me everything I needed and I was able to expand on it to change some other styles in my output.
Thanks.