JSFiddle - React, Tailwind, and code Playground

Data source

by Flexmonster Pivot Table

HTML

<link rel="stylesheet" href="https://cdn.flexmonster.com/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<button onclick="editRecord(1)">Edit "Accessories" comment</button>
<button onclick="editRecord(3)">Edit "Bikes" comment</button>
<button onclick="editRecord(2)">Edit "Clothing" comment</button>


<div id="pivot-container"></div>

JavaScript

//Fetch the data outside Flexmonster and store it in a separate variable
const data = [
  {
    Category: "Accessories",
    Price: 242,
    RowId: 1, //ID field should be defined in the dataset
    Comment: "abc",
  },
  {
    Category: "Bikes",
    Price: 1487,
    RowId: 2,
    Comment: "def",
  },
  {
    Category: "Clothing",
    Price: 40,
    RowId: 3,
    Comment: "ghi",
  },
]

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 300,
  cellclick: (data)=>{
     //Accessing IDs from the CellDataObject
     console.log(`IDs associated with the cell (${data.rowIndex},${data.columnIndex}): ${data.recordId}`)
  },
  report: {
    options: {
      grid: {
        type: "classic",
      },
    },
    dataSource: {
      data: data,
      mapping: {
        Category: {
          type: "string",
        },
        Price: {
          type: "number",
        },
        RowId: {
          type: "id", //Define type: "id"
        },
        Comment: {
          type: "string",
        },
      },
    },
    slice: {
      rows: [{ uniqueName: "Category" }, { uniqueName: "Comment" }],
      measures: [{ uniqueName: "Price", aggregation: "sum" }],
      expands: { expandAll: true },
    },
  },
})

function editRecord(id) {
  let record = data.find((r) => r.RowId == id); //Manually retrieve the entire object 
  record.Comment = Math.random().toString(36).substring(2, 7) // random 5-letter string
  pivot.updateData(
    {
      data: [record],
    },
    {
      partial: true,
    },
  )
}