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",
  toolbar: true,
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      data: getData()
    }
  },
  height: 700
});

pivot.sortingMethod("date", function(a, b) {
  const months = [
    "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
  ];
  return months.indexOf(a.substring(0, 3)) - months.indexOf(b.substring(0, 3));
});

function getData() {
  return [{
      "date": "Jan-2022",
      "price": 234743
    },
    {
      "date": "Feb-2022",
      "price": 23466
    },
    {
      "date": "Mar-2022",
      "price": 62346
    },
    {
      "date": "Apr-2022",
      "price": 63464
    },
    {
      "date": "May-2022",
      "price": 78634
    },
    {
      "date": "Jun-2022",
      "price": 72457
    },
    {
      "date": "Jul-2022",
      "price": 3457
    },
    {
      "date": "Aug-2022",
      "price": 513426
    },
    {
      "date": "Sep-2022",
      "price": 62346
    },
    {
      "date": "Oct-2022",
      "price": 62375
    },
    {
      "date": "Nov-2022",
      "price": 2345
    },
    {
      "date": "Dec-2022",
      "price": 65346
    }
  ]
}