Interactive HTML pivot table JS sample

Sample code that illustrates how to generate interactive HTML pivot table (sorting, expand/collapse, fixed headers) with help of PivotData microservice.

HTML

<a href="https://www.nrecosite.com/pivotdata_service.aspx">PivotData microservice</a> web API usage demo
<br/><br/>
<!-- Sample code that renders interactive HTML pivot table with PivotData microservice web API -->

<!-- interactive nreco pivot table jQuery plugin (change sorting, fixed headers) -->
<link href="https://pivotdataservice.nrecosite.com/pivotdataservice/Scripts/nrecopivottable.css" rel="stylesheet" />
<script type="text/javascript" src="https://pivotdataservice.nrecosite.com/pivotdataservice/Scripts/jquery.nrecopivottable.js"></script>


<div id="pivotTablePlaceholder">
  
</div>

CSS

body { font-family: Arial; }
table { width: 100%; }

JavaScript

var jwt = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6WyJkZW1vQHNlZWt0YWJsZS5jb20iLCJkZW1vQHNlZWt0YWJsZS5jb20iXSwibmFtZWlkIjpbIjEiLCIxIl0sInVuaXF1ZV9uYW1lIjpbIlNlZWtUYWJsZSBEZW1vIiwiU2Vla1RhYmxlIERlbW8iXSwicmVhZG9ubHkiOlsiVHJ1ZSIsIlRydWUiXSwibmJmIjoxNTM4NTczMTI2LCJleHAiOjE4ODQxNzMxMjYsImlhdCI6MTUzODU3MzEyNiwiaXNzIjoiU1QifQ.LlMWzVC0E0gcLCn6Wb9gw03y4IealqLRKPnCiZm-kr8";
$.ajaxSetup({
	headers: {'Authorization': "Bearer " + jwt}
});
 
 var cubeId = "7f74de2546804cf9b12da34d7e5af382";
 var reportCfg = {
   "Rows": [ {"Name":"Product Category"}, {"Name": "Product Sub-Category"}, {"Name": "Product Name"} ],
   "Columns": [ {"Name":"Order Date (Year)"}, {"Name":"Order Date (Month)"} ],
   "Measures": [ {"Name":"Count"}],
   "ExpandCollapse": {"Enabled":true}
 };
 
$('#pivotTablePlaceholder').nrecoPivotTable({
	autoload: true,
	pivotTableConfig: reportCfg,
	renderTable: function (pivotTablePlugin, callback) {
		var cfg = pivotTablePlugin.getPivotTableConfig();
		$.ajax("https://pivotdataservice.nrecosite.com/pivotdataservice/api/cube/" + encodeURIComponent(cubeId) + "/pivot/render", {
			type: "POST",
			contentType: "application/json",
			data: JSON.stringify(cfg)
		}).done(function (res) {
		  callback(res.HtmlContent, cfg);
		});
	},
	sort: true,
	fixedHeaders: true
}).bind("sortChanged pageChanged expandCollapseChanged", function () {
	$('#pivotTablePlaceholder').nrecoPivotTable("load");
});