Repeat labels in the classic (tabular) view (for versions before 2.9.119)

Customizing the grid

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>How to repeat labels in the classic (tabular) view (for versions before 2.9.119)</h2>
  <p>
    To repeat labels in the classic view, we use the
    <a href="https://www.flexmonster.com/api/customizecell/" target="_blank"
      >customizeCell()</a
    >
    method. For each cell, we check if it's a header cell and if its label is
    empty (lines 37-40 in the JavaScript box). If the cell meets these
    conditions, we repeat the member label for it (line 41).
  </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>
  <p>
    Note that <code>customizeCell()</code> isn't needed to repeat labels
    in Flexmonster versions 2.9.119 and later. Check out
    <a href="https://jsfiddle.net/flexmonster/extoa1v2/" target="_blank">this example</a> if your
    version of Flexmonster is higher than 2.9.118.
  </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);

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  customizeCell: customizeCellFunction,
  report: {
    dataSource: {
      filename: "data/data.json"
    },
    slice: {
      rows: [
      	{ uniqueName: "Country" }, 
      	{ uniqueName: "Color" }, 
      	{ uniqueName: "Category" }
    	],
      columns: [
      	{ uniqueName: "[Measures]" }
      ],
      measures: [
      	{ uniqueName: "Price" }
      ],
      expands: {
        expandAll: true
      }
    },
    options: {
      grid: {
        type: "classic",
        showTotals: "off"
      },
      showAggregationLabels: false
    }
  }
});

function customizeCellFunction(cell, data) {
  if (data && data.type == "header" &&
    data.member &&
    data.member.caption != "All" &&
    data.label == "") {
    cell.text = "&nbsp;&nbsp;&nbsp;&nbsp;" + data.member.caption;
  }
}

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

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