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; }