JSFiddle - React, Tailwind, and code Playground

Conditional formatting

by Flexmonster Pivot Table

HTML

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

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

CSS

.cell-highlighted {
  background-color: #80CBC4 !important;
}

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 650,
  customizeCell: customizeCellFunction,
  toolbar: true,
  report: {
    dataSource: {
      type: "json",
      data: getData(),
    },
    slice: {
      rows: [
        {
          uniqueName: "name",
        },
      ],
      measures: [
        {
          uniqueName: "diffNP",
          formula: "sum('parameters_theoNP') - sum('parameters_actualNP')",
          caption: "diffNP",
        },
        {
          uniqueName: "diffNPAbs",
          formula: "ABS(sum('parameters_theoNP') - sum('parameters_actualNP'))",
          caption: "diffNPAbs",
        },
      ],
    }
  },
});

function customizeCellFunction(cell, data) {
  if(data && data.value && data.value > 1000) {
    cell.addClass('cell-highlighted');
  }
}

function getData() {
  return [
    {
      name: "name1",
      parameters_theoNP: 150000,
      parameters_actualNP: 148500,
    },
    {
      name: "name2",
      parameters_theoNP: 250000,
      parameters_actualNP: 252000,
    },
  ]
}