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>

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

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      type: "json",
      data: getData(),
      mapping: {
        "L1": {
          hierarchy: "Hierarchy"
        },
        "L2": {
          hierarchy: "Hierarchy",
          parent: "L1"
        },
        "L3": {
          hierarchy: "Hierarchy",
          parent: "L2"
        },
        "L4": {
          hierarchy: "Hierarchy",
          parent: "L3"
        },
        "Player": {
          "caption": "Player",
          "type": "string"
        },
        "Agent": {
          "caption": "Agent",
          "type": "string"
        },
        "Commisinn": {
          "caption": "Commisinn",
          "type": "number"
        }
      },

    },
    slice: {
      rows: [{
        uniqueName: "Hierarchy"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Commisinn",
        aggregation: "sum"
      }],
      expands: {
        expandAllRows: true
      },
      drills: {
        drillAllRows: true
      }
    }
  }
});



function getData() {
  return [{
      "Player": {
        "caption": "Player",
        "type": "string"
      },
      "Agent": {
        "caption": "Agent",
        "type": "string"
      },
      "L1": {
        "caption": "L1",
        "type": "string"
      },
      "L2": {
        "caption": "L2",
        "type": "string"
      },
      "L3": {
        "caption": "L3",
        "type": "string"
      },
      "L4": {
        "caption": "L4",
        "type": "string"
      },
      "Commisinn": {
        "caption": "Commisinn",
        "type": "number"
      }
    },
    ["P1", "A4", "A1", "A2", "A3", "P1", 1],
    ["P1", "A3", "A1", "A2", "A3", "P1", 1],
    ["P1", "A2", "A1", "A2", "A3", "P1", 1],
    ["P1", "A1", "A1", "A2", "A3", "P1", 1],
    ["P2", "A4", "A1", "A2", "A3", "P2", 5],
    ["P2", "A3", "A1", "A2",...