Show cell content on click

Customizing the grid

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>How to show cell content on click</h2>
  <p>
    This example demonstrates how to show cell content only when the cell is
    clicked.
  </p>
  <p>
    Notice the <code>Phone Number</code> column: initially, its content is
    partly hidden. To hide the first six digits of a phone number, we use the
    <a href="https://www.flexmonster.com/api/customizecell/" target="_blank"
      >customizeCell()</a
    >
    method (lines 62-71 in the JavaScript box).
  </p>
  <p>
    When you click a cell with a phone number, the
    <a href="https://www.flexmonster.com/api/cellclick/" target="_blank"
      >cellclick</a
    >
    event is triggered. In its handler, we show the hidden phone number (lines
    56-60).
  </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>

<div id="pivotContainer"></div>

CSS

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

JavaScript

let pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      data: getData()
    },
    slice: {
      rows: [
      	{ uniqueName: "Name" },
        { uniqueName: "Company" },
        { uniqueName: "Phone Number" }
      ],
      columns: [{ uniqueName: "[Measures]" }],
      measures: [
      	{
          uniqueName: "Salary",
          aggregation: "sum",
          format: "currency"
        },
        {
          uniqueName: "Age",
          aggregation: "sum"
        }
      ],
      flatOrder: [
        "Name",
        "Salary",
        "Age",
        "Company",
        "Phone Number"
      ]
    },
    options: {
      grid: {
        type: "flat",
        showGrandTotals: false
      }
    },
    formats: [
    	{
      	name: "currency",
        decimalPlaces: 2,
        currencySymbol: "$"
      }
    ],
  }
});

const visibleNumber = {
  rowIndex: undefined,
  columnIndex: undefined
}

pivot.on("cellclick", (cell) => {
  visibleNumber.rowIndex = cell.rowIndex;
  visibleNumber.columnIndex = cell.columnIndex;
  pivot.refresh();
});

pivot.customizeCell((cell, data) => {
  if (data.hierarchy &&
    data.hierarchy.uniqueName == "Phone Number" &&
    data.type == "value" &&
    data.label &&
    !(data.rowIndex == visibleNumber.rowIndex &&
      data.columnIndex == visibleNumber.columnIndex)) {
    cell.text = "******" + data.label.slice(data.label.length - 4);
  }
});

function getData() {
  return [
  	{
   		"Name": "Hays Carter",
      "Phone Number": "(974) 435-3186",
      "Company": "Cognicode",
      "Salary": 2004,
      "Age": 24
    },
    {
      "Name": "Imelda Ratliff",
      "Phone Number": "(829) 521-2819",
      "Company": "Songlines",
      "Salary": 5400,
      "Age": 55
    },
    {
      "Name": "Huber Workman",
      "Phone Number": "(853)...