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>
<div class='conditionalFormatting'>

  <h2>
    Conditional formatting:
  </h2>
  <select id='values'>
  </select>
  <select id='aggregation'>
    <option value='count'>Count</option>
    <option value='sum'>Sum</option>
 
    <option value='distinct_count'>Distinct count</option>
    <option value='average'>Average</option>
  </select>
  
  <select id='conditions'>
    <option value='>'>Greater than</option>
    <option value='<'>Less than</option>
    <option value='=='>Equal</option>
    <option value='!='>Not equal</option>
  </select>
<input id='input' type='text' placeholder='0'>
  <button onclick="setFormatting()">Apply conditional formatting</button>
</div>
<div id="pivot-container"></div>

CSS

select, input {
  border: 2px solid #333;
  background: #fff;
  color: #333;
  margin: 5px 0;
  display: inline-block;
  transition: all .3s;
  font-weight: normal;
  padding: 10px 10px;
  font-size: 14px;
}

select,
button {
  text-transform: uppercase;
  cursor: pointer;
}

option {
  cursor: pointer;
}

.conditionalFormatting {
  padding: 15px;
  margin: 15px 30px;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.csv",
    },
    slice: {
      rows: [{
          uniqueName: "Color"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      columns: [{
        uniqueName: "Country"
      }],
      measures: [{
        uniqueName: "Price",
        aggregation: "sum"
      }]
    }
  }
});

pivot.on("reportcomplete", () => {
  //pivot.off("reportcomplete");
  const selectElement = document.getElementById('values');

  const values = pivot.getAllHierarchies();
  selectElement.innerHTML = '';
  values.forEach(value => {
    const option = document.createElement('option');
    option.value = value.uniqueName;
    option.textContent = value.caption;
    selectElement.appendChild(option);
  });
})

function setFormatting() {
  const valuesSelect = document.getElementById('values');
  const aggregationSelect = document.getElementById('aggregation');
  const conditionsSelect = document.getElementById('conditions');
  const input = document.getElementById('input');

  const selectedValue = valuesSelect.value;
  const selectedAggregation = aggregationSelect.value;
  const selectedCondition = conditionsSelect.value;
  const value = +input.value ? +input.value : 0;

	console.log(valuesSelect.value);


  pivot.addCondition({
    id: 5,
    formula: "#value " + selectedCondition + " "+value,
    format: {
      backgroundColor: "#E7FFCE"
    },
    measure: selectedValue,
    aggregation: selectedAggregation
  });
  
  console.log(pivot.getAllConditions());

  pivot.refresh();

}