JSON/CSV based React Pivot Table

Create an interactive report based on the JSON or CSV data source.

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: "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;

Connect Flexmonster Pivot for React to your local, remote, or server-side generated JSON data. Once the data is loaded, you are ready to set up a new report on the React pivot table.

You can also connect to local/remote static CSV files or CSV data generated by a server-side script. Once connected to CSV, create a new analytical report.

Moreover, you can handle the way fields are displayed on the grid using mapping. The Mapping Object also gives the capacity to control how the reporting tool interprets the fields.

Flexmonster is optimized to load and process your data extremely fast on the client side.

But once the size of your data set reaches 1GB or more, we recommend using Flexmonster Data Server. This server-side solution for data pre-processing will boost your reporting. It takes a few minutes to set it up and jump-start reporting.

JSON/CSV based React Pivot Table

See our live examples