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

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 400,
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        "Year": {
          hierarchy: "Hierarchy",
        },
        "Month": {
          type: "number",
          hierarchy: "Hierarchy",
          parent: "Year"
        },
      }
    },
    "slice": {
      "rows": [{
        "uniqueName": "[Measures]"
      }],
      "columns": [{
        "uniqueName": "Hierarchy",
        "filter": {
          "members": ["hierarchy.[2023].[6]", "hierarchy.[2023].[7]", "hierarchy.[2023].[8]", "hierarchy.[2023].[9]", "hierarchy.[2023].[10]", "hierarchy.[2023].[11]", "hierarchy.[2023].[12]", "hierarchy.[2024].[1]", "hierarchy.[2024].[2]", "hierarchy.[2024].[3]", "hierarchy.[2024].[4]", "hierarchy.[2024].[5]", "hierarchy.[2024].[6]"]
        }
      }],
      "measures": [{
        "uniqueName": "Price",
        "aggregation": "sum"
      }],
      "drills": {
        "columns": [{
          "tuple": ["hierarchy.[2023]"]
        }, {
          "tuple": ["hierarchy.[2024]"]
        }]
      }
    },
  }
});



function getData() {
  return [{
      "Year": 2023,
      "Month": 1,
      "Price": 20,
    },
    {
      "Year": 2023,
      "Month": 2,
      "Price": 20,
    },
    {
      "Year": 2023,
      "Month": 3,
      "Price": 20,
    },
    {
      "Year": 2023,
      "Month": 4,
      "Price": 20,
    },
    {
      "Year": 2023,
      "Month": 5,
      "Price": 20,
    },
    {
      "Year": 2023,
      "Month": 6,
      "Price": 20,
    },
    {
      "Year": 2023,
      "Month": 7,
      "Price": 20,
    },
    {
      "Year": 2023,
      "Month": 8,
      "Price": 20,
    },
    {
      "Year": 2023,
      "Month": 9,
      "Price": 20,
    },
    {
      "Year": 2023,
      "Month": 10,
      "Price": 20,
    },
    {
      "Year": 2023,
      "Month": 11,
      "Price": 20,
    },
    {
      "Year": 2023,
     ...