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.
Can't find your answer here?
Visit the FAQ page
Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.
Flexmonster works in plain JavaScript and TypeScript projects. It also integrates with React, Next.js, Angular, Vue, Blazor, and other technologies. See all integration options.
Flexmonster supports JSON and CSV files, SQL databases, MongoDB, Elasticsearch, and Microsoft Analysis Services (SSAS). You can also connect other data sources through your own backend. See supported data sources.
Flexmonster offers licenses for internal corporate use, SaaS products, and OEM distribution. Pricing varies by license and plan. SaaS projects can also use the free SaaS Entry license during development. Learn more on the pricing page.
Yes. Flexmonster offers a 30-day free trial that lets you evaluate all its features. No credit card is required. The trial version has a watermark.
To get started with Flexmonster, follow our integration guide.