Alternate row colors

Customizing the grid

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>How to alternate row colors</h2>
  <p>
    To alternate row colors, we use the
    <a href="https://www.flexmonster.com/api/customizecell/" target="_blank"
      >customizeCell()</a
    >
    method. For each cell, we check if the cell's <code>rowIndex</code> is even.
    If it's true, we add a CSS class with our custom color to that cell (lines
    27-35 in the JavaScript box).
  </p>
  <p>
    <a href="https://www.flexmonster.com/doc/customizing-grid/" target="_blank"
      >Visit our docs to learn more about customizing the grid</a
    >.
  </p>
</div>

<button onclick="clearCustomizing()">Clear Customizing</button>
<button onclick="startCustomizing()">Start Customizing</button>

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

CSS

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

#fm-pivot-view .fm-grid-view div.fm-cell.alter {
  background-color: #e1e1e1 !important;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 400,
  customizeCell: customizeCellFunction,
  report: {
    dataSource: {
      filename: "data/data.json"
    },
    slice: {
      rows: [{
        uniqueName: "Country"
      }],
      columns: [{
        uniqueName: "Color",
        filter: {
        	exclude: ["purple", "white"]
        }
      }],
      measures: [{
        uniqueName: "Price"
      }]
    }
  }
});

function customizeCellFunction(cell, data) {
  if (data.type == "value") {
    if (data.rowIndex % 2 == 0) {
      cell.addClass("alter");
    } else {
      return;
    }
  }
}

function clearCustomizing() {
  pivot.customizeCell(null);
}

function startCustomizing() {
  pivot.customizeCell(customizeCellFunction);
}