A high-performance React pivot grid component designed to integrate multi-dimensional data analysis into any React application. It is built to summarize and aggregate massive datasets directly within the React app, providing an intuitive interface for filtering, sorting, and grouping data in real-time.
Play with the demo on a larger screen: save this link for later or watch the video review now.
import * as FlexmonsterReact from "react-flexmonster";
import "flexmonster/flexmonster.css";
function PivotTableDemo() {
const report = {
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/data/retail-data-2024.json",
mapping: {
"Quantity": {
type: "number"
},
"Price": {
type: "number"
},
"Retail Category": {
type: "string"
},
"Sales": {
type: "number"
},
"Order Date": {
type: "year/quarter/month/day"
},
"Date": {
type: "date"
},
"Status": {
type: "string"
},
"Product Code": {
type: "string"
},
"Phone": {
type: "string"
},
"Country": {
type: "string",
folder: "Location"
},
"City": {
type: "string",
folder: "Location"
},
"CurrencyID": {
type: "property",
hierarchy: "Country"
},
"Contact Last Name": {
type: "string"
},
"Contact First Name": {
type: "string"
},
"Deal Size": {
type: "string"
}
}
},
slice: {
rows: [
{
uniqueName: "Country",
filter: {
members: [
"country.[australia]",
"country.[usa]",
"country.[japan]"
]
}
},
{
uniqueName: "Status"
}
],
columns: [
{
uniqueName: "Order Date"
},
{
uniqueName: "[Measures]"
}
],
measures: [
{
uniqueName: "Price",
aggregation: "sum",
format: "currency"
}
],
sorting: {
column: {
type: "desc",
tuple: [],
measure: {
uniqueName: "Price",
aggregation: "sum"
}
}
},
expands: {
rows: [
{
tuple: ["country.[japan]"]
}
]
},
drills: {
columns: [
{
tuple: ["order date.[2024]"]
}
]
},
flatSort: [
{
uniqueName: "Price",
sort: "desc"
}
]
},
conditions: [
{
formula: "#value > 35000",
measure: "Price",
aggregation: "sum",
format: {
backgroundColor: "#00A45A",
color: "#FFFFFF",
fontFamily: "Arial",
fontSize: "12px"
}
},
{
formula: "#value < 2000",
measure: "Price",
aggregation: "sum",
format: {
backgroundColor: "#df3800",
color: "#FFFFFF",
fontFamily: "Arial",
fontSize: "12px"
}
}
],
formats: [
{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2,
nullValue: "-"
},
{
name: "currency",
currencySymbol: "$"
}
]
};
const customizeCellFunction = (cell, data) => {
if (data.type === "header" && data.hierarchy?.caption === "Country" && data.member?.properties) {
const name = data.member.properties.CurrencyID;
cell.addClass("fm-custom-cell");
let flag;
if (data.expanded) {
flag = `<i class="fm-icon fm-expanded-icon" title="Click to collapse"></i>
<img class="flag-icon" src="https://cdn.flexmonster.com/flags/${name.toLowerCase()}.svg">`;
} else {
flag = `<i class="fm-icon fm-collapsed-icon" title="Click to expand"></i>
<img class="flag-icon" src="https://cdn.flexmonster.com/flags/${name.toLowerCase()}.svg">`;
}
cell.text = `<div style="display:flex; align-items:center; font-size:12px; position:relative;">
${flag}<span style="margin-left: 2px; line-height: 16px;">${data.member.caption}</span></div>`;
}
};
return (
<>
<FlexmonsterReact.Pivot
height={550}
toolbar={true}
report={report}
customizeCell={customizeCellFunction}
beforetoolbarcreated={(toolbar) => {
toolbar.showShareReportTab = true;
}}
shareReportConnection={{
url: "https://olap.flexmonster.com:9500"
}}
/>
</>
);
}
export default PivotTableDemo;
.fm-custom-cell {
display: flex !important;
align-items: center !important;
font-size: 12px !important;
}
.fm-custom-cell .flag-icon {
width: 21px !important;
height: 16px !important;
margin-left: 0 !important;
margin-right: 2px !important;
}
#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-expanded .fm-expanded-icon::before,
#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-collapsed .fm-collapsed-icon::before {
top: -2px;
height: 16px;
}
The Flexmonster React pivot table library provides a robust analytical engine that serves as a scalable foundation for custom data analysis within your application.
You can also check our video tutorial on how to integrate the React pivot table into your app.
Flexmonster is built for enterprise-scale performance, smoothly processing and displaying massive datasets of more than 1 million rows. Thanks to memory optimization methods and virtual grid technology, even large datasets are loaded into your React component without any delay.
For datasets larger than 1GB, use the Flexmonster Server, which offloads aggregation to the backend entirely. It connects directly to your data source (database, JSON, or CSV), processes the data server-side, and streams only the summarized result to the pivot table for visualization, keeping the UI fast and responsive at any scale.