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/",
  toolbar: true,
  customizeCell: customizeCellFunction,
  report: {
    dataSource: {
      data: getData(),
    },
    "slice": {
      "rows": [{
          "uniqueName": "Directory"
        },
        {
          "uniqueName": "Year"
        }
      ],
      "columns": [{
        "uniqueName": "[Measures]"
      }],
      "measures": [{
        "uniqueName": "Value",
        "aggregation": "sum"
      }],
      "expands": {
        expandAll: true
      }
    },
    "options": {
      "grid": {
        "type": "classic",
        "showTotals": "off",
        "showGrandTotals": "off"
      }
    },
  }
});

function customizeCellFunction(cell, data) {
  if (data && data.type == "header" &&
    data.member &&
    data.member.caption != 'All' &&
    data.label == "") {
    cell.text = "&nbsp;&nbsp;&nbsp;" + data.member.caption;
  }
}

function getData() {
  return [{
      "Directory": "C",
      "Year": "2021",
      "Value": 100
    },
    {
      "Directory": "C",
      "Year": "2021",
      "Value": 45
    },
    {
      "Directory": "C",
      "Year": "2021",
      "Value": 34
    },
    {
      "Directory": "C",
      "Year": "2022",
      "Value": 34
    },
    {
      "Directory": "C",
      "Year": "2022",
      "Value": 566
    },
    {
      "Directory": "R",
      "Year": "2021",
      "Value": 7
    },
    {
      "Directory": "R",
      "Year": "2021",
      "Value": 57
    },
    {
      "Directory": "R",
      "Year": "2021",
      "Value": 33
    },
    {
      "Directory": "R",
      "Year": "2021",
      "Value": 4
    },
    {
      "Directory": "R",
      "Year": "2020",
      "Value": 33
    },
  ]
}