JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/2.9.52/flexmonster.js"></script>

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

JavaScript

var pivot = new Flexmonster({
  container: "wpt-container",
  componentFolder: "https://cdn.flexmonster.com/2.9.52/",
  global: {
    localization: "https://cdn.flexmonster.com/loc/fr.json",
  },
  toolbar: true,
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  report: {
    dataSource: {
      mapping: getMapping(),
      filename: "https://cdn.flexmonster.com/data/flexmonsterData_KO.json",
    },
  },
  beforetoolbarcreated: customizeToolbar,
});



function exportHandler(params) {
  pivot.exportTo(params, {
    filename: "Forecast détaillé"
  });
}

function customizeToolbar(toolbar) {
  // get all tabs 
  let tabs = toolbar.getTabs();
  toolbar.getTabs = function() {
    // remove the Connect tab using its id
    tabs = tabs.filter(tab => tab.id != "fm-tab-connect");
    tabs = tabs.filter(tab => tab.id != "fm-tab-open");
    tabs = tabs.filter(tab => tab.id != "fm-tab-save");
    for (var i = 0; i < tabs.length; i++) {
      if (tabs[i].id == "fm-tab-export") {
        var menus = tabs[i].menu;
        for (var j = 0; j < menus.length; j++) {
          menus[j].handler = exportHandler;

        }
      }
    }

    updateGranted = true;
    tabs.unshift({
      id: "fm-tab-newsave",
      title: "Enregistrer",
      handler: newSaveHandler,
      icon: this.icons.save
    });

    tabs.push({
      id: "fm-tab-openAll",
      title: "Développer",
      handler: openAll,
      icon: this.icons.fullscreen
    });
    tabs.push({
      id: "fm-tab-closeAll",
      title: "Réduire",
      handler: closeAll,
      icon: this.icons.minimize
    });
    return tabs;
  }

  var newSaveHandler = function() {
    saveReport();
  }

  var openAll = function() {
    mybtnOpen = document.getElementById("fm-tab-openAll");
    mybtnClose = document.getElementById("fm-tab-closeAll");

    flexmonster.expandAllData();
    if (mybtnOpen) mybtnOpen.style.display = "none";
    if (mybtnClose) mybtnClose.style.display = "";
  }

  var closeAll = function()...