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="pivotContainer1"></div>
<div id="pivotContainer2"></div>

JavaScript

new Flexmonster({
  container: "pivotContainer1",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 300,
  report: {
    "dataSource": {
      "filename": "https://www.flexmonster.com/fm_uploads/2020/08/source.json"
    },
    slice: getSlice(),
    "options": {
      "grid": {
        "title": "Data is coming from the data source directly"
      }
    }
  }
});

new Flexmonster({
  container: "pivotContainer2",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 300,
  report: {
    "dataSource": {
      data: getData()
    },
    slice: getSlice(),
    "options": {
      "grid": {
        "title": "Data is coming from the data source through AJAX"
      }
    }
  }
});

function getData() {
  return JSON.parse($.ajax({
    url: "https://www.flexmonster.com/fm_uploads/2020/08/source.json",
    type: "GET",
    async: false
  }).responseText);
}

function getSlice() {
  return {
    "slice": {
      "rows": [{
          "uniqueName": "Periode.Year",
          "caption": "Année"
        },
        {
          "uniqueName": "Periode.Month",
          "caption": "Mois",
          "filter": {
            "members": [
              "periode.month.[août]"
            ]
          }
        }
      ],
      "columns": [{
          "uniqueName": "Periode.Day",
          "caption": "Jour",
          "filter": {
            "members": [
              "periode.day.[2]",
              "periode.day.[1]"
            ]
          }
        },
        {
          "uniqueName": "[Measures]"
        }
      ],
      "measures": [{
          "uniqueName": "nbr_appel",
          "aggregation": "sum",
          "caption": "Nombre appels",
          "grandTotalCaption": "Total Nombre appels"
        },
        {
          "uniqueName": "durée TMC appel",
          "formula": "sum(\"sum_duree\") / count(\"nbr_appel\")",
          "caption": "durée TMC appel"
        },
        {
          "uniqueName": "Total durée appels",
          "formula": "sum(\"sum_duree\")",
 ...