Adding a condition for total or regular cells

Conditional formatting

by Flexmonster Pivot Table

HTML

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

<button onclick="formatValues('total')">Format total cells</button>
<button onclick="formatValues('regular')">Format regular cells</button>
<button onclick="formatValues('all')">Format all cells</button>
<button onclick="removeCondition()">Remove formatting</button>

<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,
  report: {
    dataSource: {
      filename: "data/data.csv",
    },
    options: {
    	grid: {
      	type: "classic"
      }
    },
    slice: {
      rows: [
        {
          uniqueName: "Category",
          filter: {
        	  members: ["Accessories", "Clothing", "Components"]
          }
        },
        {
          uniqueName: "Color",
          filter: {
            members: ["blue", "red", "white"]
          }
        }
      ],
      columns: [
        { uniqueName: "[Measures]" }
      ],
      measures: [
        {
          uniqueName: "Price"
        }, 
        {
          uniqueName: "Quantity"
        }
      ],
      expands: {
      	rows: [
        	{
          	tuple: ["category.[clothing]"]
          },
          {
          	tuple: ["category.[components]"]
          }
        ]
      }
    }
  }
});

function formatValues(cellType) {
  const id = 1;
  let condition = pivot.getCondition(id);
  
  if (!condition) {
    condition = {
      id: 1,
      formula: "AND(#value > 3000, #value < 1000000)",
      format: {
        backgroundColor: "#B3E5FC" // Light blue
      }
    };
  }
  
  switch (cellType) {
  	case "total":
      condition.isTotal = true;
      break;
    case "regular":
      condition.isTotal = false;
      break;
    case "all":
      delete condition.isTotal;
      break;
  }
  
  pivot.addCondition(condition);
  pivot.refresh();
}

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