Control how rows, columns, or specific cells are styled inside the React pivot table component.
import React from "react";
import * as FlexmonsterReact from "react-flexmonster";
class PivotTableDemo extends React.Component {
render() {
return (
<>
<FlexmonsterReact.Pivot
componentFolder="https://cdn.flexmonster.com/"
height={600}
report={{
dataSource: {
type: "csv",
filename: "https://cdn.flexmonster.com/data/data.csv",
},
slice: {
rows: [
{
uniqueName: "Country",
},
{
uniqueName: "Business Type",
},
],
columns: [
{
uniqueName: "Color",
},
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Quantity",
aggregation: "percentofcolumn",
},
],
expands: {
expandAll: true,
},
},
formats: [
{
decimalPlaces: 2,
},
],
}}
customizeCell={this.customizeCellFunction}
/>
</>
);
}
customizeCellFunction = (cell, data) => {
if (data?.type === "value" && !data?.isDrillThrough) {
if (data.value < 5) {
cell.text = `<img src='https://cdn.flexmonster.com/i/empty_pie.svg' class='centered'>`;
} else if (data.value >= 5 && data.value < 10) {
cell.text = `<img src='https://cdn.flexmonster.com/i/quarter_pie.svg' class='centered'>`;
} else if (data.value >= 10 && data.value < 25) {
cell.text = `<img src='https://cdn.flexmonster.com/i/half_pie.svg' class='centered'>`;
} else if (data.value >= 25 && data.value < 50) {
cell.text = `<img src='https://cdn.flexmonster.com/i/three_quarters_pie.svg' class='centered'>`;
} else if (data.value >= 50) {
cell.text = `<img src='https://cdn.flexmonster.com/i/full_pie.svg' class='centered'>`;
}
}
};
}
export default PivotTableDemo;
img.centered {
display: block !important;
margin: auto !important;
color: transparent !important;
}
#fm-pivot-view .fm-grid-row {
min-height: 47px;
}
Flexmonster for React differentiates from other solutions on the market with its high customizability. You already know that you can change component themes and customize the Toolbar. On top of that, you can also replace cell values with any visual content (e.g., with icons), highlight cells based on their data, add hyperlinks, style totals and grand totals, and more.
Here you can see how to replace numbers with icons based on cell values. Play with the demo’s code to learn how to reach this with one hook.