Fast and powerful React Pivot table for data visualization and reporting.
import React from "react";
import * as FlexmonsterReact from "react-flexmonster";
class PivotTableDemo extends React.Component {
render() {
return (
<>
<div className="App">
<FlexmonsterReact.Pivot
componentFolder="https://cdn.flexmonster.com/"
height={550}
toolbar={true}
report={{
dataSource: {
type: "json",
filename: "data/retail-data.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: "-13w0a1w1c23j00",
},
],
sorting: {
column: {
type: "desc",
tuple: [],
measure: {
uniqueName: "Price",
aggregation: "sum",
},
},
},
expands: {
rows: [
{
tuple: ["country.[japan]"],
},
],
},
drills: {
columns: [
{
tuple: ["order date.[2019]"],
},
],
},
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: "-13w0a1w1c23j00",
thousandsSeparator: " ",
decimalSeparator: ".",
decimalPlaces: 0,
currencySymbol: "$",
positiveCurrencyFormat: "$1",
nullValue: "-",
textAlign: "right",
isPercent: false,
},
],
}}
customizeCell={this.customizeCellFunction}
shareReportConnection={{
url: "https://olap.flexmonster.com:9500",
}}
beforetoolbarcreated={(toolbar) => {
toolbar.showShareReportTab = true;
}}
/>
</div>
</>
);
}
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>`;
}
};
}
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;
}
Working with the Pivot table web component in integration with React has never been easier. Lightweight, still full of functions enough to present your data in the best way - Flexmonster React Pivot table is a bold solution for web developers.
Choose how the data is arranged on the grid using the classic, compact, or flat pivot table layouts.
Create interactive reports on the data source you have your data stored: CSV, JSON, Elasticsearch, Microsoft Analysis Services, MongoDB, SQL databases (MySQL, PostgreSQL, Oracle, etc) or evencustom data sources.
Collect the exact data you need with rich functionality: summarization, filtering, sorting, or grouping. This drag-n-drop react pivot table is also easy to use and navigate.
Export the results of full-fledged data analysis to the files of the most common formats: PDF, CSV, Excel, HTML, or PNG or print them.