NReco PivotTable.js Extensions Example

NReco WebPivot provides the following enhancements to the open-source pivottable jQuery plugin:

sort by: labels, column or row values (click on labels)
fixed headers
extract pivot table data (json) for exporting to CSV or Excel
handle click on value for adding drill-down functionality

In case of any questions feel free to contact us: support@nrecosite.com

Example 1: Simple pre-configured pivot table

uses NReco extensions features: sort (asc/desc), fixed headers

var nrecoPivotExt = new NRecoPivotTableExtensions({
	fixedHeaders : true
});
$("#samplePivotTable1").pivot(
	sampleData,
	{
		rows: ["Year"],
		cols: ["Country"],
		rendererOptions : {	},
		renderer : nrecoPivotExt.wrapTableRenderer(
			$.pivotUtilities.renderers["Table"]) 
	});	
nrecoPivotExt.initFixedHeaders(
	$("#samplePivotTable1").find('table.pvtTable') );

Example 2: simple pivot table builder

wrap all table renderers for pivot UI
uses NReco extension features: sort (asc/desc), fixed headers
save/load report state

var nrecoPivotExt = new NRecoPivotTableExtensions({
	wrapWith: '<div class="pvtTableRendererHolder">>/div>',
	fixedHeaders : true,
	onSortHandler : function(sortOpts) {
		// save changed sort options in pivotUI state
		// this handler is needed only if you need to save state of user-configured report
		var pvtUIOpts = $('#samplePivotTable2').data("pivotUIOptions");
		if (!pvtUIOpts.rendererOptions) pvtUIOpts.rendererOptions = {};
		pvtUIOpts.rendererOptions.sort = sortOpts;		
	}
});
var nrecoPivotExt = new NRecoPivotTableExtensions({
	fixedHeaders : true
});

var stdRendererNames = ["Table","Table Barchart",
	"Heatmap","Row Heatmap","Col Heatmap"];
var wrappedRenderers = $.extend( {}, $.pivotUtilities.renderers);
$.each(stdRendererNames, function() {
	var rName = this;
	wrappedRenderers[rName] = 
		nrecoPivotExt.wrapTableRenderer(wrappedRenderers[rName]);
});

$('#samplePivotTable2').pivotUI(sampleData, {
	renderers: wrappedRenderers,
	// pivot table sort state, leave empty to apply default order (labels A-Z)
	rendererOptions: { sort: { direction : "desc", column_key : [ 2014 ]} },
	// pivot table setup
	vals: ["Total"],
	rows: ["Country"],
	cols: ["Year"],
	aggregatorName : "Sum",
	onRefresh: function (pivotUIOptions) {
		nrecoPivotExt.initFixedHeaders(
			$('#samplePivotTable2 table.pvtTable'));
	}
});

Example 3: Drill-down handler and export pivot data

wrap table renderer with pivot data export accessor
handle click on the cells with values (drill-down)

The following code may be used for accessing pivot data values (for export functions, for instance):

var reportData = $('#samplePivotTable3 .pivotExportData').data('getPivotExportData')();

NReco PivotTable.js Extensions

Example 1: Simple pre-configured pivot table

Example 2: simple pivot table builder

Example 3: Drill-down handler and export pivot data

Example 4: Add C3 Charts renderer