Customizing the handler of an existing Toolbar tab: example with export to PDF

Customizing the Toolbar

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<p>
  Try exporting to PDF using the <b>Export</b> tab.
</p>

<div id="pivot-container"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

JavaScript

const pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  beforetoolbarcreated: customizeToolbar,
  report: "https://cdn.flexmonster.com/reports/report.json"
});

function customizeToolbar(toolbar) {
  let tabs = toolbar.getTabs();
  toolbar.getTabs = function() {
    let exportTab = tabs.find(tab => tab.id == "fm-tab-export");
    if (!exportTab) return tabs;
    let exportToPdfTab = exportTab.menu.find(tab => tab.id == "fm-tab-export-pdf");
    exportToPdfTab.handler = () => {
      this.pivot.exportTo("pdf", {
        header: "<div>HEADER</div>",
        footer: "<div>##CURRENT-DATE##</div>"
      });
    }
    return tabs;
  }
}