JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<button onclick="setLevelName('YEAR')">levelName Year</button>
<button onclick="setLevelName('MNTH')">levelName Month</button>
<div id="pivot-container"></div>

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 550,
  toolbar: true,
  report: {
    dataSource: {
      type: "api",
      url: pivotEndpoint,
      index: "hierarchy-index",
      mapping: {
        YEAR: {
          hierarchy: "Calendario",
        },
        QRTR: {
          hierarchy: "Calendario",
          parent: "YEAR",
        },
        MNTH: {
          hierarchy: "Calendario",
          parent: "QRTR",
        },
        DVSN: {
          hierarchy: "Product",
        },
        PGRP: {
          hierarchy: "Product",
          parent: "DVSN",
        },
        DEPT: {
          hierarchy: "Product",
          parent: "PGRP",
        },
        CLSS: {
          hierarchy: "Product",
          parent: "DEPT",
        },
        SCLS: {
          hierarchy: "Product",
          parent: "CLSS",
        },
        COMP: {
          hierarchy: "Company",
        },
        CHAN: {
          hierarchy: "Company",
          parent: "COMP",
        },
        CHNL: {
          hierarchy: "Company",
          parent: "CHAN",
        },
      },
    },
    options: {
      showAggregationLabels: false,
    },
    slice: {
      rows: [
        {
          uniqueName: "Product",
          levelName: "DEPT",
          filter: {
            members: [
              "product.[sample].[0000].[dept 1].[class 1].[1000]",
              "product.[sample].[0000].[dept 1].[class 2]",
            ],
          },
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      columns: [
        {
          uniqueName: "Calendario",
          levelName: "MNTH",
        },
      ],
      measures: [
        {
          uniqueName: "VALUE",
          aggregation: "sum",
          caption: "Tr Vendas $",
        },
        {
          uniqueName: "VALUE2",
         ...