Add hyperlinks to cells

Customizing the grid

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>How to add hyperlinks to cells</h2>
  <p>In this example, we've added hyperlinks to all countries in the report.</p>
  <p>
    To insert a link into a cell, we use the
    <a href="https://www.flexmonster.com/api/customizecell/" target="_blank"
      >customizeCell()</a
    >
    method. It wraps each country name with a link that points to the respective
    Wikipedia page (lines 31-47 in the JavaScript box).
  </p>
  <p>
    Besides plain text, cells can also contain icons and other HTML elements. On
    lines 37-42, you can see how such cases are handled.
  </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);

.link {
  text-decoration: underline !important;
  cursor: pointer;
  color: #00a45a !important;
}

JavaScript

const 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"
      }, {
        uniqueName: "Color"
      }],
      columns: [{
        uniqueName: "Category",
        filter: {
        	exclude: ["Accessories"]
        }
      }, {
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Price"
      }]
    }
  }
});

function customizeCellFunction(cell, data) {
  if (!(data.hierarchy && data.hierarchy.uniqueName == "Country")) return;

  let newText =
    `<a href='https://en.wikipedia.org/wiki/${data.escapedLabel}' target='_blank' class='link' onclick='preventExpand(event)'>${data.escapedLabel}</a>`;

  if (data.type == "header" && data.member) {
    let parts = cell.text.split(data.escapedLabel);
    if (parts.length == 2) {
      newText = parts[0] + newText + parts[1];
    }
    cell.text = newText;
  } else if (data.type == "value" && (data.member || data.isDrillThrough)) {
    cell.style['z-index'] = 1;
    cell.text = newText;
  }
}

function preventExpand(e) {
  e.stopImmediatePropagation();
}

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

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