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

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    "dataSource": {
      type: "json",
      data: getData()
    },
    slice: {
      rows: [{
        uniqueName: "Status"
      }, {
        uniqueName: "Country"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Price",
        format:"decimal5"
      }],
      expands: {
        expandAll: true
      }

    },
    formats: [{
      name: "decimal5",
      decimalPlaces: 5
    }],
  }
});


function getData() {
  return [{
      "Status": "On hold",
      "Country": "Austria",
      "Price": 0
    },{
      "Status": "On hold",
      "Country": "Australia",
      "Price": 0.00105321
    }, {
      "Status": "On hold",
      "Country": "Canada",
      "Price": 0.01697321
    }, {
      "Status": "On hold",
      "Country": "Denmark",
      "Price": 0.01497321
    }, {
      "Status": "On hold",
      "Country": "Israel",
      "Price": -0.00365321
    }, {
      "Status": "On hold",
      "Country": "Japan",
      "Price": -0.00676321
    }, {
      "Status": "On hold",
      "Country": "Norway",
      "Price": 0.00234321
    }, {
      "Status": "On hold",
      "Country": "Poland",
      "Price": -0.00842321
    },
    {
      "Status": "On hold",
      "Country": "Sweden",
      "Price": 0.00309312
    }, {
      "Status": "On hold",
      "Country": "Switzerland",
      "Price": -0.00892321
    }, {
      "Status": "On hold",
      "Country": "USA",
      "Price": 0
    }, {
      "Status": "On hold",
      "Country": "Ukraine",
      "Price": -0.00015321
    },
  ]
}