Add a custom tab to the Toolbar

Customizing the Toolbar

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>How to add a custom tab to the Toolbar</h2>
  <p>
    You can add a new tab to the Toolbar using the
    <code>beforetoolbarcreated</code> event. In the event handler, define a
    custom tab with a needed functionality and add it to the array of Toolbar
    tabs. We've added the <strong>New Tab</strong> in this example (lines 14-24
    in the JavaScript box).
  </p>
  <p>
    With the <code>beforetoolbarcreated</code> event, you can also remove or
    update existing Toolbar tabs.
  </p>
  <p>
    <a
      href="https://www.flexmonster.com/doc/customizing-toolbar/"
      target="_blank"
      >Refer to our docs to learn more about customizing the Toolbar</a
    >.
  </p>
</div>

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

CSS

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

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 400,
  toolbar: true,
  beforetoolbarcreated: customizeToolbar,
  report: {
    dataSource: {
      filename: "data/data.json"
    }
  }
});

function customizeToolbar(toolbar) {
  let tabs = toolbar.getTabs();
  toolbar.getTabs = function() {
    tabs.unshift({
      // An attribute that is used for CSS styling
      id: "fm-tab-newtab",
			// The tab’s label
      title: "New Tab",
      // A  function that handles clicks on this tab
      handler: newtabHandler,
      // An HTML element with a tab icon
      // You can choose an icon defined in flexmonster.toolbar.js
      icon: this.icons.open
    });
    return tabs;
  }

  let newtabHandler = () => {
    alert("New functionality!");
  }
}