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>

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 650,
  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",
        },
      ],
    },
    conditions: [
      {
        formula: "#value > 1000",
        format: {
          backgroundColor: "#80CBC4",
          color: "#000000",
          fontFamily: "Arial",
          fontSize: "12px",
        },
      },
    ],
  },
})
function getData() {
  return [
    {
      name: "name1",
      parameters_theoNP: 150000,
      parameters_actualNP: 148500,
    },
    {
      name: "name2",
      parameters_theoNP: 250000,
      parameters_actualNP: 252000,
    },
  ]
}