Get Free Trial
List of all demos

JSON/CSV based React Pivot Table

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


    import React, { Component } from "react";
    import * as FlexmonsterReact from "react-flexmonster";
    
    class PivotTableDemo extends Component {
      render() {
        return (
          <>
            <button className="button-red" onClick={this.onOpenLocalCSV}>
              Open local CSV
            </button>
            <button className="button-red" onClick={this.onLoadRemoteCSV}>
              Load remote CSV
            </button>
            <button className="button-red" onClick={this.onOpenLocalJSON}>
              Open local JSON
            </button>
            <button className="button-red" onClick={this.onLoadRemoteJSON}>
              Load remote JSON
            </button>
            <div className="App">
              <FlexmonsterReact.Pivot
                ref="pivot"
                componentFolder="https://cdn.flexmonster.com/"
                customizeCell={this.customizeCellFunction}
                report={{
                  dataSource: {
                    type: "csv",
                    filename: "https://cdn.flexmonster.com/data/happyness.csv",
                  },
                  slice: {
                    rows: [
                      {
                        uniqueName: "Region",
                      },
                      {
                        uniqueName: "Country or region",
                      },
                    ],
                    columns: [
                      {
                        uniqueName: "[Measures]",
                      },
                      {
                        uniqueName: "Year",
                      },
                    ],
                    measures: [
                      {
                        uniqueName: "Score",
                        aggregation: "median",
                        grandTotalCaption: "Average Happyness",
                      },
                    ],
                  },
                  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,
                    },
                  ],
                }}
              />
            </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.