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>
<h3>
  Click on the cell, change value and press enter
</h3>
<div id="pivot-container"></div>

CSS

.editable {
  padding: 0 !important;
  z-index: 1 !important;
}

.editable input {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 0px solid;
  padding-left: 4px !important;

}

JavaScript

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

flexmonster.customizeCell(function(cell, data) {
  if (data && data.type == "value") {
    cell.addClass("editable");
    cell.text = `<input type="text" value="${data.label}" onchange="onChange(event)" data-cell='${JSON.stringify(data)}'>`;
  }
}) 

function onChange(event) {
  let modDataObj = {};
  modDataObj.newValue = event.target.value;
  modDataObj.cell = JSON.parse(event.target.getAttribute("data-cell"));
  modDataObj.oldValue = modDataObj.cell.value;
  modDataObj.delta = modDataObj.newValue - modDataObj.oldValue;
  console.log("cell:", modDataObj.cell);
  console.log("old value:", modDataObj.oldValue);
  console.log("new value:", modDataObj.newValue);
  console.log("delta:", modDataObj.delta);

  $.ajax({
    type: "POST",
    url: '/echo/json/',
    data: JSON.stringify(modDataObj),
    dataType: "json",
    success: function(data) {
      console.log("Data was successfully sent.");
    },
    error: function(data) {
      console.log("Error sending the data.");
    }
  });
}