JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<button onclick="checkoutRows()">
  Checkout row's grand totals
</button>
<button onclick="checkoutColumns()">
  Checkout columns's grand totals
</button>
<button id="back-button" onclick="checkoutInitial()">
  Get back
</button>

<div id="pivotContainer"></div>

JavaScript

let pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    "slice": {
      "rows": [{
          "uniqueName": "Category"
        },
        {
          "uniqueName": "Color"
        }
      ],
      "columns": [{
          "uniqueName": "Country"
        },
        {
          "uniqueName": "Discount"
        },
        {
          "uniqueName": "[Measures]"
        }
      ],
      "measures": [{
          "uniqueName": "Price",
          "aggregation": "sum"
        },
        {
          "uniqueName": "Quantity",
          "aggregation": "sum"
        }
      ],
      "expands": {
        "expandAll": true
      },
      "drills": {
        "drillAll": true
      }
    }
  }
});

function checkoutRows() {
  flexmonster.scrollToRow(Number.MAX_SAFE_INTEGER);
}

function checkoutColumns() {
  flexmonster.scrollToColumn(Number.MAX_SAFE_INTEGER);
}

function checkoutInitial() {
  flexmonster.scrollToRow(0);
  flexmonster.scrollToColumn(0);
}