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="addRecord()">Add record</button>
<div id="pivot-container">The component will appear here</div>

JavaScript

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 550,
  global: {
    localization: {
      grid: {
        blankMember: "-",
      },
    },
  },
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        Color: {
          type: "string",
        },
        Country: {
          type: "string",
        },
        RowId: {
          type: "id",
        },
        Price: {
          type: "number",
        },
      },
    },
    options: {
      grid: {
        type: "flat",
        showGrandTotals: false,
        showEmptyValues: true,
      },
      editing: true,
    },
  },
})

pivot.on("datachanged", function (e) {
  console.log("datachanged", e)
  // add new line to your dataset and use updateData to reflect the changes on the grid
})

function addRecord() {
  //need at least one empty field so we could add new record
  const dataForUpdate = [
    {
      Category: "",
      Price: "",
    },
  ]
  pivot.updateData(
    {
      data: dataForUpdate,
    },
    {
      partial: true,
    },
  )
}

function getData() {
  return [
    {
      Color: "green",
      Country: "USA",
      RowId: 1,
      Price: 174,
    },
    {
      Color: "red",
      Country: "Canada",
      RowId: 2,
      Price: 30,
    },
    {
      Color: "blue",
      Country: "France",
      RowId: 3,
      Price: 283,
    },
    {
      Color: "purple",
      Country: "Germany",
      RowId: 4,
      Price: 371,
    },
  ]
}