JSON/CSV-based React Pivot Table

import React from "react";
import * as FlexmonsterReact from "react-flexmonster";

class PivotTableDemo extends React.Component {
  render() {
    return (
      <>
        <button onClick={this.onOpenLocalCSV}>Open local CSV</button>
        <button onClick={this.onLoadRemoteCSV}>Load remote CSV</button>
        <button onClick={this.onOpenLocalJSON}>Open local JSON</button>
        <button onClick={this.onLoadRemoteJSON}>Load remote JSON</button>
        <div className="App">
          <FlexmonsterReact.Pivot
            ref="pivot"
            componentFolder="https://cdn.flexmonster.com/"
            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,
                },
              ],
            }}
            customizeCell={this.customizeCellFunction}
          />
        </div>
      </>
    );
  }

  onOpenLocalCSV = () => {
    this.refs.pivot.flexmonster.connectTo({
      type: "csv",
      browseForFile: true,
    });
  };

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

  onOpenLocalJSON = () => {
    this.refs.pivot.flexmonster.connectTo({
      type: "json",
      browseForFile: true,
    });
  };

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

  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) + " 😃";
      }
    }
  };
}

export default PivotTableDemo;