Customizing cells based on the conditional formatting

Customizing the grid

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div id="pivot-container"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  customizeCell: customizeCellFunction,
  report: {
    dataSource: {
      filename: "data/data.json",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
        {
          uniqueName: "Business Type",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      columns: [
        {
          uniqueName: "Color",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
        },
      ],
      expands: {
        rows: [
          {
            tuple: ["country.[australia]"],
          },
          {
            tuple: ["country.[canada]"],
          },
        ],
      },
    },
    options: {
      grid: {
        type: "classic",
      },
    },
    conditions: [
      {
        formula: "#value > 20000 AND #value < 50000",
        isTotal: false,
        format: {
          backgroundColor: "#C5E1A5",
          color: "#000",
          fontFamily: "Arial",
          fontSize: "12px",
        },
      },
    ],
  },
  beforegriddraw: function (e) {
    if (e.smooth == false) {
      shouldCleanStyles = true;
    }
  },
  aftergriddraw: function (e) {
    addExtraStyles();
  },
});

let shouldCleanStyles = false;
let shouldAddStyles = false;
let rowsWithCondition = [];
let conditions = [];
let styleTag;

function cleanExtraStyles() {
  let prevStyleTag = document.head.getElementsByTagName("style");
  for (let i = 0; i < prevStyleTag.length; i++) {
    if (prevStyleTag[i].innerHTML.indexOf(".fm-grid-layout div.fm-cell") == 0) {
      if (window.ActiveXObject || "ActiveXObject" in window) {
        prevStyleTag[i].removeNode(true);
      } else {
        prevStyleTag[i].remove();
      }
    }
  }
}

function addExtraStyles() {
  if (styleTag && shouldAddStyles)...