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>
<button onclick="print()">Clique Here</button>
<div id="pivot-container"></div>
JavaScript
var customizeToolbar = function(toolbar) {
var tabs = toolbar.getTabs();
toolbar.getTabs = function() {
// delete the first tab
delete tabs[0];
delete tabs[1];
delete tabs[2];
// add new tab
tabs.unshift({
id: "fm-tab-collapse-columns",
title: "DeleteLayout",
handler: "deleteLayoutHandler",
icon: this.icons.format
});
tabs.unshift({
id: "fm-tab-collapse-columns",
title: "Retract",
handler: "collapseAll",
icon: this.icons.minimize
});
tabs.unshift({
id: "fm-tab-expand-columns",
title: "Expand",
handler: "expandAll",
icon: this.icons.fullscreen
});
tabs.unshift({
id: "fm-tab-save",
title: "Save",
handler: "savetabHandler",
icon: this.icons.save
});
tabs.unshift({
id: "fm-tab-export-print",
title: "Print",
handler: "printCube",
icon: this.icons.export_print
});
tabs.unshift({
id: "fm-tab-newtab",
title: "LoadData",
handler: "reloadCube",
icon: this.icons.open_local
});
return tabs;
}
}
var pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
toolbar: true,
//beforetoolbarcreated: customizeToolbar,
report: {
options: {
grid: {
type: "flat",
}
},
slice: {
"rows": [{
uniqueName: "Category"
},
{
uniqueName: "Size"
},
{
uniqueName: "Color"
},
{
uniqueName:...