Javascript Pivot Table JQuery Pivot Table Plugin + ASP.NET integration


js pivot open-source jQuery pivottable.js plugin

  • Lightweight, free and open source javascript pivot table: Pivottable.js (pivot.js)
  • user-friendly drag&drop UI for creating pivot table (crosstab, summary table)
  • handles up to 100,000 rows, all calculations are performed by js code
  • supports typical aggregate functions: count, count unique values, list unique values, sum, average, min, max, % of totals; custom function can be easily added
  • additional renderers: heatmaps, pivot charts (Google Charts / C3.js)

nreco extensions advanced features for pivottable.js

  • fixed headers (freeze headers for pivot table rows & columns)new
  • sort pivot table by values, totals or labels
  • drill down handler (click on cell and see aggregated data details)
  • access to calculated pivot table data (for pivot table exports)
  • Bootstrap 3 mobile-friendly styles
  • ASP.NET WebPivot Report Builder package includes:
    • PivotTable.js NReco Extensions (commercial version)
    • Data query builder js components (jQuery plugins)
    • NReco WebPivot Editor (integrates pivottable.js + NReco extensions with data query builder)
    • Server-side API for loading data by used-defined query from SQL database (based on NReco.Data library)
    • Export pivot table components (CSV, Excel, PDF)
    • Integrated ASP.NET example (MVC app):
      • use SQL database as data source for pivot table
      • server-side data filter: reduce amount of data for javascript pivot table
      • save / load pivot table report state (user-defined reports)
      • export pivot table to CSV/Excel/PDF formats
    • 1 year of email support and free package code updates

download and pricing

quick purchase process

  • 1 Choose a package
  • 2 Pay online 2Checkout.com is a worldwide leader in online payment services
  • 3 Download the package
NReco Web Pivot Builder package allows you to embed javascript pivot tables into any ASP.NET application (MVC,WebForms). Reports are configured by end-user in a web browser and may be exported to CSV, Excel and PDF.

Looking for server-side pivot table component? Try NReco PivotData Toolkit.

how to use

  1. Include jQuery, pivot.js and nrecopivottableext.js files
  2. Initialize PivotTable jQuery plugin and apply NReco Extensions with the following js code:
    var nrecoPivotExt = new NRecoPivotTableExtensions({
    	drillDownHandler: function (dataFilter) { 
    		console.log(dataFilter); 
    	} });
    var sampleData = [{"A":1,"B":1,V:1}, ... ];
    var pvtOpts = {
    	renderer: nrecoPivotExt.wrapTableRenderer($.pivotUtilities.renderers["Table"]),
    	rendererOptions: { sort: { direction : "desc", column_key : [ "1" ]} },
    	vals: ["V"], rows: ["A"], cols: ["B"],
    	aggregator : $.pivotUtilities.aggregators["Sum"](["V"]),
    }	
    $('#pivot').pivot(sampleData, pvtOpts);
    
Have a question? Feel free to contact us.

javascript pivot table example

Click on col/row labels or totals to sort data by values.
Click on cell to see aggregated rows (drill-down).

ASP.NET Web Pivot Table Builder Online Demo

plugin options

Option Description Example
fixedHeaders Default: true. If enabled and pivot table has an overflow (container element limited in width and/or height) fixed headers are used.
{ fixedHeaders: true }
sortByLabelEnabled Default: true. If enabled user can click on dimension name to order table by dimension labels (keys).
{ sortByLabelEnabled: true }
sortByColumnsEnabled Default: true. If enabled user can click on column label to order table by column values.
{ sortByColumnsEnabled: true }
sortByRowsEnabled Default: true. If enabled user can click on row label to order table by row values.
{ sortByRowsEnabled: true }
wrapWith Default: null. Wraps <table> with specified element. Useful when fixedHeaders=true to limit pivot table by height and/or width.
{ wrapWith: '<div class="pvtTableRendererHolder">>/div>', }
drillDownHandler Default: null (function). This function is called when user clicks on table value cell. Argument is a (dimension name)→(dimension key) map for the clicked row x column intersection.
{
  drillDownHandler: function (attrFilter) {
    console.log(attrFilter); 
  }
}
onSortHandler Default: null (function). This function is called when user changes order of the pivot table. Argument is a structure that describes sort state (rendererOptions.sort entry).
{
  onSortHandler:function (sortOpts) {console.log(sortOpts);}
}

frequently asked questions

In some cases pivot table should be generated on server side (for example, report generation on schedule). It is possible to render PivotTable.js on the server side with one of the following tools: As alternative, consider using another .NET component for calculating pivot data and rendering pivot table on the server: PivotData Toolkit for .NET.
Pivottable.js plugin is not suitable in this case: it performs all calculations in a web browser (dataset is aggregated by javascript code). Depending on concrete environment (web browser, available memory) it can load and handle a bit more than 100k rows but in most cases this leads to weird user experience (slowness, freezes, browser crush).

For large datasets you may use components that perform pivot table calculations on the server-side:
  • PivotData Toolkit: .NET library for ASP.NET projects
  • PivotData REST Service: .NET Core backend, can be hosted on Linux or Windows and integrated with any web application (PHP, Ruby, Python, NodeJS, Java).
PivotData packages include embeddable web pivot tables & charts builder (js frontend) that gives similar experience to pivottable.js and offers more features (several measures, group subtotals, TOP N limits, exports etc).
Free version of NReco extensions (nrecopivottableext.js, nrecopivottableext.css) can be used and redistributed without any limitations. Note that any modifications in the javascript code are NOT allowed, as well as removing or hiding "powered by" notice.

You may purchase commercial package with per-project license to avoid these restrictions and remove "powered by" notice.

what's new

2017 May 15 Changes:
  • fixed issue: sort state is not saved in pivotUI state because of recent changes in pivot.js. Workaround provided:
    • onSortHandler now accepts sortOptions argument (rendererOptions.sort entry)
    • examples were modified and now they update pivotUI state explicitely
2017 Jan 31 Changes:
  • make NReco extensions compatible with latest pivottable.js 2.7
  • ASP.NET integration changes:
    • used newest NReco.Data for data access instead of legacy NI.Data
    • now SQLite northwind database is used as sample data source
    • fixed issues with data query builder
    • fixed issues with PDF export (clipped content, page breaks inside cells)
2016 May 24 Changes:
  • added fixed headers for table renderers
  • fixes for minor issues (related to default options)
  • added more examples for NReco Extensions usage
2015 Nov 26 Changes:
  • upgrade WebPivot package to the latest pivottable.js (2.0)
  • enabled GoogleChart / C3 Chart renderers
  • fixed sort issue for chart renderers
2015 Nov 18 Changes:
  • fixed grand total value calculation for CSV/Excel exports (when grand total is not a sum of totals - for example, when "count unique" is used)
  • added ability to sort by table row or column labels (headers)
2015 Jun 19 Changes:
  • added overall totals calculation for CSV and PDF exports
  • fixed Excel export for case when pivot table contains only rows (or columns)
  • other minor changes related to CSV/Excel export (headers rendering)
2015 Apr 05 Changes:
  • fixed sort handling when one axis doesn't contain keys
  • avoid showing derived columns if zero records loaded
  • updated to latest pivottable.js + use new "sorters" option for ordering month names without using prefixes like 01-Jan
  • fixed drill-down handler issue after sorting
  • enabled support for touch devices
2015 Jan 15 Initial Javascript Pivot Table ASP.NET package release

similar components

  • PivotData Toolkit for .NET

    .NET components for manipulating multidimensional dataset (in-memory data cube) without OLAP server, aggregating huge datasets, calculating data for pivot table / chart reports, ASP.NET pivot table builder control.

  • PivotData Microservice

    .NET Core app that provides web API for PivotData Toolkit functionality: create pivot tables & charts by SQL/MongoDb databases, export to JSON/CSV/Excel/PDF. Can be used as backend for web pivot table builder.