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",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      data: getData(),
    },
    "slice": {
      "rows": [{
          "uniqueName": "name"
        },
        {
          "uniqueName": "county"
        }
      ],
      "columns": [{
        "uniqueName": "[Measures]"
      }],
      "measures": [{
        "uniqueName": "number",
        "aggregation": "sum",
        "format": "column"
      }],
    },
    "formats": [{
      "name": "column",
      "decimalPlaces": 5
    }],
    options: {
        "showEmptyValues": true,
    }
  }
});

function getData() {
  return [{
      "name": "name",
      "county": "USA",
      "number": 0.00108398
    },
    {
      "name": "name",
      "county": "France",
      "number": 0.00108398
    },
    {
      "name": "name",
      "county": "Ukraine",
      "number": 0.00105398
    },
    {
      "name": "name",
      "county": "Italy",
      "number": 0.0169738
    },
    {
      "name": "name",
      "county": "Canada",
      "number": 0.01497398
    },
    {
      "name": "name",
      "county": "Poland",
      "number": -0.00365398
    },
    {
      "name": "name",
      "county": "UK",
      "number": -0.00234398
    },
    {
      "name": "name",
      "county": "Ireland",
      "number": 0.00309398
    },
    {
      "name": "name",
      "county": "Netherlands",
      "number": 0.00309398
    },
    {
      "name": "name",
      "county": "Switzerland",
      "number": -0.03428
    },
    {
      "name": "name",
      "county": "Japan",
      "number": null
    }
  ]
}