JSFiddle - React, Tailwind, and code Playground

Data source

by Flexmonster Pivot Table

HTML

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

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

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  customizeCell,
  report: {
    dataSource: {
      data: getData(),
    },
    options: {
      grid: {
        showGrandTotals: "rows",
      },
    },
    slice: {
      columns: [
        {
          uniqueName: "Product",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      rows: [
        {
          uniqueName: "Currency",
        },
      ],
      measures: [
        {
          aggregation: "sum",
          uniqueName: "Price",
        },
      ],
    },
  },
})

function customizeCell(cell, data) {
  if (!data.rows[0]) return
  if (data.rows[0].caption == "GBP" && data.value) {
    cell.text = "£ " + cell.text
  } else if (data.rows[0].caption == "USD" && data.value) {
    cell.text = "$ " + cell.text
  }
}

function getData() {
  return [
    {
      Product: "iPhone",
      Currency: "GBP",
      Price: 750,
    },
    {
      Product: "iPhone",
      Currency: "USD",
      Price: 1000,
    },
  ]
}