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="pivotContainer"></div>

JavaScript

var pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        "Date": {
          type: "date string"
        },
        "Tenure": {
          type: "string"
        },
        "Days In Position": {
          type: "number"
        },
        "Sorting": {
          type: "property",
          hierarchy: "Tenure"
        }
      }
    },
    "slice": {
      "rows": [{
        "uniqueName": "Date"
      }],
      "columns": [{
          "uniqueName": "Tenure"
        },
        {
          "uniqueName": "[Measures]"
        }
      ],
      "measures": [{
        "uniqueName": "Days In Position",
        "aggregation": "average"
      }]
    }
  }
});

flexmonster.on("reportcomplete", () => {
  flexmonster.off("reportcomplete");
  let members = flexmonster.getMembers("Tenure");
  pivot.sortingMethod("Tenure", function(a, b) {
    a = members.filter(function(member) {
      return member.caption == a;
    })[0];
    b = members.filter(function(member) {
      return member.caption == b;
    })[0];
    return a.properties.Sorting > b.properties.Sorting ? 1 : -1;
  });
})

function getData() {
  return [{
      "Date": "2020-01-05T13:23:03+00:00",
      "Tenure": "3-6 months",
      "Days In Position": 430,
      "Sorting": 1
    },
    {
      "Date": "2020-02-19T20:25:16+00:00",
      "Tenure": "2-4 years",
      "Days In Position": 107,
      "Sorting": 4
    },
    {
      "Date": "2020-03-20T21:26:28+00:00",
      "Tenure": "6-10 years",
      "Days In Position": 120,
      "Sorting": 5
    },
    {
      "Date": "2020-03-24T17:53:41+00:00",
      "Tenure": "1-2 years",
      "Days In Position": 346,
      "Sorting": 3
    },
    {
      "Date": "2020-01-31T18:49:37+00:00",
      "Tenure": "3-6 months",
      "Days In Position": 491,
      "Sorting": 1
    },
    {
      "Date": "2020-03-21T15:32:09+00:00",
     ...