React Pivot Table: Custom cells

Control how rows, columns, or specific cells are styled inside the React pivot table component.

import * as FlexmonsterReact from "react-flexmonster";
import "flexmonster/flexmonster.css";

function PivotTableDemo() {
  const 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
      }
    ]
  };

  const 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">`;
      }
    }
  };

  return (
    <>
      <FlexmonsterReact.Pivot
        height={600}
        report={report}
        customizeCell={customizeCellFunction}
      />
    </>
  );
}

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.

Heat map Live data update

Prev Next

React Pivot Table: Custom cells

For the best experience

See our live examples