JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<h3>
Try exporting to Excel using the "Export" tab
</h3>
<div id="pivot-container"></div>
JavaScript
var pivot = new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
toolbar: true,
beforetoolbarcreated: customizeToolbar,
report: {
"dataSource": {
"type": "csv",
"filename": "https://cdn.flexmonster.com/data/data.csv"
},
"slice": {
"reportFilters": [{
"uniqueName": "Business Type",
"filter": {
"members": [
"business type.[specialty bike shop]"
]
}
}
],
"rows": [{
"uniqueName": "Color"
}],
"columns": [{
"uniqueName": "Category",
"filter": {
"members": [
"Category.[Bikes]"
]
}
}],
"measures": [{
"uniqueName": "Price",
"aggregation": "sum"
}]
}
}
});
function customizeToolbar(toolbar) {
var tabs = toolbar.getTabs();
toolbar.getTabs = function() {
let exportTab = tabs.find(tab => tab.id == "fm-tab-export");
if (!exportTab) return tabs;
let exportToExcelTab = exportTab.menu.find(tab => tab.id == "fm-tab-export-excel");
exportToExcelTab.handler = () => {
pivot.exportTo("excel", {
showFilters: true
});
}
return tabs;
}
}