JSFiddle - React, Tailwind, and code Playground

Customizing the Toolbar

by Flexmonster Pivot Table

HTML

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

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

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 saveTab = tabs.find((tab) => tab.id == "fm-tab-save")
    if (!saveTab) return tabs
    saveTab.handler = () => {
      const report = this.pivot.getReport();
      // your saving JSON logic here
      console.log(report)
    }
    return tabs
  }
}