Highlighting cells on a certain level (for versions 2.8.16 and later)

Custom CSS

by Flexmonster Pivot Table

HTML

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

<div>
  <p>
    Please note that the approach used in this example works only for
    Flexmonster versions 2.8.16 and later.
  </p>
  <p>
    If your version of Flexmonster is 2.8.15 or older, see the following
    example:
    <a href="https://jsfiddle.net/flexmonster/v06jx81y/" target="_blank"
      >Highlighting cells on a certain level using customizeCell (for versions
    before 2.8.16)</a>.
  </p>
</div>

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

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

/* Grid styles */

#fm-pivot-view .fm-grid-view div.fm-level-0.fm-cell,
#fm-pivot-view .fm-grid-view div.fm-level-0.fm-cell.fm-header,
#fm-pivot-view .fm-grid-view div.fm-level-0.fm-cell.fm-total {
  background-color: #674EA7;
  border-bottom: 1px solid #674EA7;
  border-right: 1px solid #674EA7;
  color: white;
}

#fm-pivot-view .fm-grid-view div.fm-level-1.fm-cell,
#fm-pivot-view .fm-grid-view div.fm-level-1.fm-cell.fm-header,
#fm-pivot-view .fm-grid-view div.fm-level-1.fm-cell.fm-total {
  background-color: #8E7CC3;
  border-bottom: 1px solid #8E7CC3;
  border-right: 1px solid #8E7CC3;
  color: white;
}

#fm-pivot-view .fm-grid-view div.fm-level-2.fm-cell,
#fm-pivot-view .fm-grid-view div.fm-level-2.fm-cell.fm-header,
#fm-pivot-view .fm-grid-view div.fm-level-2.fm-cell.fm-total {
  background-color: #D9D2E9;
  border-bottom: 1px solid #D9D2E9;
  border-right: 1px solid #D9D2E9;
}

#fm-pivot-view .fm-grid-view div.fm-level-0.fm-cell.fm-header:hover,
#fm-pivot-view .fm-grid-view div.fm-level-1.fm-cell.fm-header:hover,
#fm-pivot-view .fm-grid-view div.fm-level-2.fm-cell.fm-header:hover {
  color: #000;
  border: none;
}

#fm-pivot-view .fm-grid-view div.fm-level-0.fm-cell.fm-header i.fm-icon::before {
  color: #d3c8e5;
}

#fm-pivot-view .fm-grid-view div.fm-level-1.fm-cell.fm-header i.fm-icon::before {
  color: #d3c8e5;
}

#fm-pivot-view .fm-grid-view div.fm-level-2.fm-cell.fm-header i.fm-icon::before {
  color: #8E7CC3;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 600,
  report: {
    dataSource: {
      filename: "https://cdn.flexmonster.com/data/data.json"
    },
    slice: {
      rows: [{
        uniqueName: "Country"
      }, {
        uniqueName: "Business Type"
      }, {
        uniqueName: "Category"
      }, {
        uniqueName: "[Measures]"
      }],
      columns: [{
        uniqueName: "Color"
      }],
      measures: [{
        uniqueName: "Price"
      }],
      expands: {
        rows: [{
            tuple: [
              "country.[australia]"
            ]
          },
          {
            tuple: [
              "country.[australia]",
              "business type.[warehouse]"
            ]
          }
        ]
      }
    },
    options: {
      grid: {
        type: "classic"
      }
    }
  }
});