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: {
    options: {
      chart: {
        type: "pie"
      },
      viewType: "charts"
    },
    slice: {
      rows: [{
          uniqueName: "Country"
        },
        {
          uniqueName: "Customer"
        }
      ],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Price"
      }],
      expands: {
        rows: [{
          tuple: [
            "country.[usa]"
          ]
        }]
      }
    },
    dataSource: {
      data: [{
        "Country": "USA",
        "Customer": "John Johnson",
        "Price": 100
      }, {
        "Country": "USA",
        "Customer": "John  Johnson",
        "Price": 200
      }]
    }
  }
});