JSFiddle - React, Tailwind, and code Playground

Data source

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div style='display:flex; flex-direction:row'>
<div id="total-container"></div>
<div id="pivot-container"></div>
<div>

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 300,
  report: {
    dataSource: {
      data: getData(),
    },
    slice: {
      rows: [
        {
          uniqueName: "Productgroup",
        },
        {
          uniqueName: "Article",
        },
      ],
      columns: [
        {
          uniqueName: "Customer",
          filter: {
            measure: {
              uniqueName: "Value",
              aggregation: "sum",
            },
            query: {
              top: 3,
            },
          },
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Value",
          aggregation: "sum",
        },
      ],
      sorting: {
        row: {
          type: "desc",
          tuple: [],
          measure: {
            uniqueName: "Value",
            aggregation: "sum",
          },
        },
      },
      expands: {
        rows: [
          {
            tuple: ["productgroup.[spices]"],
          },
        ],
      },
    },
    options: {
      grid: {
        showGrandTotals: "off",
        showHeaders: false,
      },
    },
  },
})

const pivot2 = new Flexmonster({
  container: "total-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 300,
  width: 300,
  report: {
    dataSource: {
      data: getData(),
    },
    slice: {
      rows: [
        {
          uniqueName: "Productgroup",
        },
        {
          uniqueName: "Article",
        },
      ],
      columns: [
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Value",
          aggregation: "sum",
        },
      ],
      sorting: {
        row: {
          type: "desc",
          tuple: [],
          measure: {
            uniqueName:...