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/flexmonster.js"></script>

<h3>
  Try exporting to Excel using the "Export" tab
</h3>

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

JavaScript

let 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"
        },
        slice: {
          rows: [{
            "uniqueName": "Category",
            "filter": {
              "members": [
                "color.[Accessories]",
                "color.[Bikes]",
                "color.[Cars]"
              ]
            }
          }],
          columns: [{
              "uniqueName": "Color",
              "filter": {
                "members": [
                  "color.[red]",
                  "color.[green]"
                ]
              }
            },
            {
              "uniqueName": "[Measures]"
            }
          ],
          measures: [{
            "uniqueName": "Price",
            "aggregation": "sum"
          }],
          reportFilters: [
            {
              "uniqueName": "Business Type",
              "filter": {
                "exclude": [
                  "business type.[specialty bike shop]"
                ]
              }
            }],
          },
        }
      });

    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-excel");
        exportToPdfTab.handler = () => {
          this.pivot.exportTo("excel", {
            showFilters: true,
            footer: `${new Date().getDate().toString().padStart(2, '0')}.${(new Date().getMonth() + 1).toString().padStart(2, '0')}.${new Date().getFullYear()}`
          });
        }
        return tabs;
      }
    }