JSFiddle - React, Tailwind, and code Playground

Customizing the Toolbar

by Flexmonster Pivot Table

HTML

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

<p>Try switching to a chart view using the <b>Charts</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: {
    dataSource: {
      type: "csv",
      filename: "https://cdn.flexmonster.com/data/data.csv",
    },
  },
});

function customizeToolbar(toolbar) {
  let tabs = toolbar.getTabs();
  toolbar.getTabs = function () {
    let chartsTab = tabs.find((tab) => tab.id == "fm-tab-charts");
    let gridTab = tabs.find((tab) => tab.id == "fm-tab-grid");

    if (!chartsTab && !gridTab) return tabs;

    //Change slice when switching to grid
    gridTab.handler = () => {
      this.pivot.showGrid();
      this.pivot.runQuery({
        rows: [
          {
            uniqueName: "Category",
          },
        ],
        measures: [
          {
            aggregation: "sum",
            format: "currency",
            uniqueName: "Price",
          },
        ],
      });
    };

    //Change slice when switching to charts
    chartsTab.menu.forEach((tab) => {
      const originalHandler = tab.handler;
      tab.handler = () => {
        originalHandler.apply(this, [tab.args]);

        this.pivot.runQuery({
          rows: [
            {
              uniqueName: "Destination",
            },
          ],
          measures: [
            {
              aggregation: "sum",
              format: "currency",
              uniqueName: "Price",
            },
          ],
        });
      };
    });
    return tabs;
  };
}