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()
    },
    "slice": {
      "rows": [{
          "uniqueName": "Country"
        },
        {
          "uniqueName": "Department"
        }
      ],
      "columns": [{
        "uniqueName": "[Measures]"
      }],
      "measures": [{
        "uniqueName": "Employee number",
        "aggregation": "average",
        "format": "rounding"
      }]
    },
    "options": {
      "viewType": "grid_charts",
      "chart": {
        "type": "line",
        "showDataLabels": true,
        "position": "right"
      }
    },
    "formats": [{
      "name": "rounding",
      "decimalPlaces": 0
    }],
  }
});

function getData() {
  return [{
      "Country": "USA",
      "Department": "Belva",
      "Employee number": 9
    },
    {
      "Country": "USA",
      "Department": "Harrison",
      "Employee number": 8
    },
    {
      "Country": "USA",
      "Department": "Elrama",
      "Employee number": 4
    },
    {
      "Country": "USA",
      "Department": "Spokane",
      "Employee number": 2
    },
    {
      "Country": "Canada",
      "Department": "Snyderville",
      "Employee number": 3
    },
    {
      "Country": "Canada",
      "Department": "Chase",
      "Employee number": 4
    },
    {
      "Country": "Canada",
      "Department": "Soudan",
      "Employee number": 0
    },
    {
      "Country": "USA",
      "Department": "Henrietta",
      "Employee number": 9
    },
    {
      "Country": "Canada",
      "Department": "Cliff",
      "Employee number": 3
    },
    {
      "Country": "Canada",
      "Department": "Gardners",
      "Employee number": 8
    }
  ]
}