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>

<button onclick="addToSlice()">Add To Slice</button>
<div id="pivot-container"></div>

JavaScript

var pivot = new Flexmonster({
	container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 430,
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    "slice": {
        "rows": [
            {
                "uniqueName": "Country"
            }
        ],
        "columns": [
            {
                "uniqueName": "[Measures]"
            },
            {
                "uniqueName": "Destination"
            }
        ],
        "measures": [
            {
                "uniqueName": "Discount",
                "aggregation": "sum"
            }
        ]
    }
    
  }
});

function addToSlice() {

    let columns = pivot.getColumns();
    columns.push({"uniqueName": "Color"});
    columns.push({"uniqueName": "[Measures]"});
    
    let rows = pivot.getRows();
    rows.push({"uniqueName": "Category"});
    rows.push({"uniqueName": "Size"});
    
    let measures = pivot.getMeasures();
    measures.push({"uniqueName": "Price", "aggregation": "sum"});
    measures.push({"uniqueName": "Quantity","aggregation": "sum"});
    
    let reportFilters = pivot.getReportFilters();
    reportFilters.push({caption: "Business Type", uniqueName: "Business Type", sort: "desc", type: "string"});
    
     var slice = {
   			rows:rows,
   			columns: columns,
   		  measures: measures,
        reportFilters: reportFilters
  	};
    
    pivot.runQuery(slice);
}