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;
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 or 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 control how fields are displayed on the grid using the mapping. It also allows you 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 100 MB or more, we recommend using Flexmonster Data Server. This server-side solution for data aggregation will boost your reporting. It takes a few minutes to set it up and jump-start reporting.