Hiding columns with right click menu

Other

by Flexmonster Pivot Table

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>


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

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  report: {
    dataSource: {
      dataSourceType: "csv",
      filename: "https://cdn.flexmonster.com/data/data.csv"
    },
    "slice": {
        "rows": [
            {
                "uniqueName": "Category"
            }
        ],
        "columns": [
            {
                "uniqueName": "Country"
            },
            {
                "uniqueName": "[Measures]"
            }
        ],
        "measures": [
            {
                "uniqueName": "Price",
                "aggregation": "sum"
            },
            {
                "uniqueName": "Quantity",
                "aggregation": "sum"
            }
        ]
    },
    options: {
      grid: {
        showHeaders: false
      }
    }
  },
  height: 480,
  toolbar: true,
  componentFolder: "https://cdn.flexmonster.com/"
});

flexmonster.customizeContextMenu(function(items, data, viewType) {
		items.push({
			label: "Hide column",
			handler: function() {
        var report = flexmonster.getReport();
        var tableSizes = report.hasOwnProperty("tableSizes") ? report.tableSizes : {};
				var newElement = {};
        newElement.width = 0;
        newElement.tuple = data.columns.length == 0 ? [] : [data.columns[0].uniqueName];
        newElement.measure = {
             "uniqueName": data.measure.uniqueName,
             "aggregation": data.measure.aggregation
        };
        if (!tableSizes.hasOwnProperty("columns")) {
            tableSizes.columns = [];
        }
        tableSizes.columns.push(newElement);
        report.tableSizes = tableSizes;
        flexmonster.setReport(report);
			}
		});
	return items;
});