JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

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

JavaScript

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      mapping: {
        "WorkHours": {
          "type": "number"
        },
        "Y": {
          "caption": "Year",
          "type": "level",
          "hierarchy": "Date",
          "level": "Year"
        },
        "Q": {
          "caption": "Quarter",
          "type": "level",
          "hierarchy": "Date",
          "level": "Quarter",
          "parent": "Year"
        },
        "M": {
          "caption": "Month",
          "type": "level",
          "hierarchy": "Date",
          "level": "Month",
          "parent": "Quarter"
        },
        "W": {
          "caption": "Week",
          "type": "level",
          "hierarchy": "Date",
          "level": "Week",
          "parent": "Month"
        },
        "D": {
          "caption": "Day",
          "type": "level",
          "hierarchy": "Date",
          "level": "Day",
          "parent": "Week"
        }
      },
      data: getData()
    },
    "slice": {
      "rows": [{
        "uniqueName": "Date"
      }],
      "columns": [{
        "uniqueName": "[Measures]"
      }],
      "measures": [{
        "uniqueName": "WorkHours",
        "aggregation": "sum"
      }],
      "drills": {
        "drillAll": true
      }
    }
  }
});

function getData() {
  return [{
      "WorkHours": 7,
      "Y": 2020,
      "Q": 1,
      "M": 2,
      "W": 9,
      "D": 24
    },
    {
      "WorkHours": 5,
      "Y": 2010,
      "Q": 4,
      "M": 10,
      "W": 41,
      "D": 13
    },
    {
      "WorkHours": 8,
      "Y": 2019,
      "Q": 3,
      "M": 7,
      "W": 27,
      "D": 5
    },
  ]
}