JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<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: {
        'Site name': {
          type: 'string'
        },
        'Visitors': {
          type: 'number'
        },
        'Date': {
          type: 'datestring'
        }
      }
    },
    slice: {
      rows: [{
        uniqueName: "Site name"
      }, {
        uniqueName: "Date"
      }, {
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Visitors"
      }],
      expands: {
        expandAll: true
      }
    },
    options: {
      grid: {
        type: 'compact',
        showEmptyValues: true
      }
    }
  }
});

function getData() {
  return [{
      "Site name": "Zboo.name",
      //"Visitors": 4366,
      "Date": "2014-05-07"
    },
    {
      "Site name": "Zboo.name",
      "Visitors": 1017,
      "Date": "2019-07-08"
    },
    {
      "Site name": "Zboo.name",
      "Visitors": 1235,
      "Date": "2015-07-13"
    },
    {
      "Site name": "Boilcat.co.uk",
      //"Visitors": 8765,
      "Date": "2014-05-07"
    },
    {
      "Site name": "Boilcat.co.uk",
      "Visitors": 2643,
      "Date": "2019-07-08"
    },
    {
      "Site name": "Boilcat.co.uk",
      "Visitors": 7248,
      "Date": "2015-07-13"
    },
    {
      "Site name": "Insectus.io",
      "Visitors": 5428,
      "Date": "2014-05-07"
    }, {
      "Site name": "Insectus.io",
      //"Visitors": 9471,
      "Date": "2019-07-08"
    }, {
      "Site name": "Insectus.io",
      "Visitors": 1654,
      "Date": "2015-07-13"
    }
  ];
}