JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<button onclick="add()">Add condition</button>
<button onclick="remove()">Remove condition</button>

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

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  customizeCell: customizeCellFunction,
  report: {
    "dataSource": {
      filename: "data/data.csv"
    }
  }
});

function add() {
  let condition = {
    id: 1,
    formula: '#value > 400000',
    format: {
      backgroundColor: "#33BB33",
      fontStyle: "italic",
      fontWeight: "bold"
    },
  };
  flexmonster.addCondition(condition);
  flexmonster.refresh();
}

function customizeCellFunction(cell, data) {
  if(data.type && data.type == "value" && data.conditions && data.conditions[0] == 1) {
    cell.text += "⚠"
  }
}

function remove() {
  let id = 1;
  flexmonster.removeCondition(id);
  flexmonster.refresh();
}