JSON/CSV-based React Pivot Table

import { useRef } from "react";
import * as FlexmonsterReact from "react-flexmonster";
import "flexmonster/flexmonster.css";

function PivotTableDemo() {
  const pivotRef = useRef(null);

  const report = {
    dataSource: {
      type: "csv",
      filename: "https://cdn.flexmonster.com/data/happiness.csv",
      mapping: {
        "Year": {
          type: "string"
        }
      }
    },
    slice: {
      rows: [
        {
          uniqueName: "Region"
        },
        {
          uniqueName: "Country or region"
        }
      ],
      columns: [
        {
          uniqueName: "[Measures]"
        },
        {
          uniqueName: "Year"
        }
      ],
      measures: [
        {
          uniqueName: "Score",
          aggregation: "median",
          grandTotalCaption: "Average Happiness"
        }
      ]
    },
    conditions: [
      {
        formula: "AND(#value > 7.3, #value < 10)",
        format: {
          backgroundColor: "#f0c63e",
          color: "#000000",
          fontFamily: "Arial",
          fontSize: "12px"
        }
      },
      {
        formula: "AND(#value > 0, #value < 4.5)",
        format: {
          backgroundColor: "#f29c8d",
          color: "#000000",
          fontFamily: "Arial",
          fontSize: "12px"
        }
      }
    ],
    formats: [
      {
        name: "",
        decimalPlaces: 2
      }
    ]
  };

  const onOpenLocalCSV = () => {
    pivotRef.current.flexmonster.connectTo({
      type: "csv",
      browseForFile: true
    });
  };

  const onLoadRemoteCSV = () => {
    let filename = prompt("Open remote CSV", "https://cdn.flexmonster.com/data/data.csv");
    if (filename != null) {
      pivotRef.current.flexmonster.connectTo({
        type: "csv",
        filename: filename
      });
    }
  };

  const onOpenLocalJSON = () => {
    pivotRef.current.flexmonster.connectTo({
      type: "json",
      browseForFile: true
    });
  };

  const onLoadRemoteJSON = () => {
    let filename = prompt("Open remote JSON", "https://cdn.flexmonster.com/data/data.json");
    if (filename != null) {
      pivotRef.current.flexmonster.connectTo({
        type: "json",
        filename: filename
      });
    }
  };

  const customizeCellFunction = (cell, data) => {
    if (data.isGrandTotalColumn) {
      if (data.value < 5 && data.value >= 0) {
        cell.text = data.value.toPrecision(3) + " ☹️";
      } else if (data.value >= 5 && data.value < 7) {
        cell.text = data.value.toPrecision(3) + " 🙂";
      } else if (data.value >= 7 && data.value < 10) {
        cell.text = data.value.toPrecision(3) + " 😃";
      }
    }
  };

  return (
    <>
      <button onClick={onOpenLocalCSV}>Open local CSV</button>
      <button onClick={onLoadRemoteCSV}>Load remote CSV</button>
      <button onClick={onOpenLocalJSON}>Open local JSON</button>
      <button onClick={onLoadRemoteJSON}>Load remote JSON</button>

      <FlexmonsterReact.Pivot
        ref={pivotRef}
        report={report}
        customizeCell={customizeCellFunction}
      />
    </>
  );
}

export default PivotTableDemo;