We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
The JavaScript Pivot Table is a powerful control used to organize and summarize business data and display the result in a cross-table format. It includes major functionalities: data binding, drilling up and down, Excel-like filtering and sorting, editing, Excel and PDF exporting, several built-in aggregations, field lists, and calculated fields. A high volume of data can be loaded without any performance degradation by using row and column virtualization.
Users can load large amounts of raw data into the pivot engine, aggregate it, and view it on-demand through virtual scrolling and paging options with ease.
You can bind JSON data to the control to work smoothly within applications. The JSON data can be obtained from a local file, remote file, or web service.
You can also bind CSV data to the control. The CSV data can be obtained from a local file, remote file, or web service.
The JavaScript Pivot Table can be connected to an OLAP cube, and its result can be visualized in both tabular and graphical formats.
Binding the JavaScript Pivot Table with RESTful services allows data from any source, including Excel and CSV files; SQL databases like Microsoft SQL, MySQL, and PostgreSQL; and collections like IEnumerable, IList, and array lists through services, to be consumed using the data manager explicitly. The data manager supports various data adaptors such as JSON, OData, ODataV4, URLs, and web APIs for working with particular data services.
The JavaScript Pivot Chart can easily be integrated with pivot data rendered independently and includes support for plotting more than 20 chart types. The end-user experience is greatly enhanced with a set of user-interaction features such as drill up, drill down, zoom, pan, crosshair, trackball, events, selection, and tooltip. Highly interactive field list options are available for generating reports from the relational data dynamically.
Large amounts of data can be divided and displayed in the rows and columns of the current viewport using the virtual scrolling feature. You can navigate to a desired view by scrolling the vertical and horizontal scrollbars.
Large amounts of data can be divided and displayed page by page with the paging feature. The pager UI allows you to navigate to a desired page using the navigation buttons or an input text box. You can change the row and column page sizes independently at runtime. Furthermore, you can toggle the position of the row and column pagers, modify their visibility, and visualize them using a compact view mode.
All features will work on touch devices with ease. Features such as drilling up, drilling down, filtering, sorting, and report manipulation can be done on the fly.
Responsive support allows the control to be viewed on various devices.
The Pivot Table field list can be displayed on various devices in a presentable manner.
The JavaScript Pivot Table field list and group fields option are automatically populated with fields from the bound data source. They allow end users to drag, filter, and sort fields, as well as create pivot reports at runtime.
Provides built-in drill-down (expand) and drill-up (collapse) capabilities to visualize data in detailed views and abstract views, respectively. By default, the data is displayed in a grouped manner.
Users can refresh the control on demand instead of during every UI interaction in the Pivot Table.
Users can perform create, read, update, and delete operations for raw data at runtime and update their changes to the underlying data source, thereby reflecting the information in all corresponding cells. The Pivot Table control in JS supports various edit modes such as inline, dialog, batch edit, and column edit through an interactive UI.
Built-in member function and Excel-like filters with advanced filtering options can be used to easily filter and view data as required. It is also possible to filter data programmatically in the Pivot Table.
Display only selected values for a field. This can be achieved either through the UI or code-behind.
Use Excel-like filtering options across column and row headers based on label text, date, or number.
Use Excel-like filtering options across column and row headers based on grand total values.
Sort to order rows and columns based on either labels or values.
Order column and row header text either in ascending or descending order.
Column sorting, also known as value sorting, orders the column values either in ascending or descending order. It is performed by clicking the header of the column you wish to sort.
Arrange field headers in column and row axes according to the user-defined order.
Users can perform calculations on a group of values using the aggregation option. By default, values are added together. The other aggregation types are average, minimum, maximum, count, distinct count, product, index, population standard deviation, sample standard deviation, population variance, sample variance, running totals, difference from, percent of difference from, and percent of grand total.
Calculated fields, otherwise known as unbound fields, generate unique fields with your own calculated values by executing a simple, user-defined formula.
The drill through feature easily obtains a list of raw items for a particular value cell or summary cell.
Subtotals and grand totals are calculated automatically by the pivot engine inside the control and displayed in the Pivot Table to help users make decisions more quickly. Also, users can show or hide subtotals and grand totals for rows and columns.
Users can define conditions that, when met, format font style, text color, background color, and font size for values and summary cells.
Number and date formatting helps transform the appearance of the actual cell value.
The Pivot Table control automatically groups dates and numbers, so the date type can be formatted and displayed based on year, quarter, month, day, and more. The number type can be grouped by range, such as 1-5 or 6-10.
You can freeze row and column headers to compare them with cell values.
Resizing allows changing column width at runtime by simply dragging the rightmost boundary of the column header. A scroll bar will appear when the content width exceeds the control width.
You can reorder columns either on user interaction or programmatically. Simply dragging and dropping a column header into the desired column position will reorder the columns.
Users can retrieve information about a particular cell on clicking a hyperlink cell. It later allows them to perform custom operations programmatically.
A tooltip provides basic information about a cell while hovering over it with the pointer.
With cell templates, users can add features like images, checkboxes, and text nodes to any cell with ease.
The toolbar feature provides a built-in interface to select frequently used features interactively. These features include new report, save report, save as report, rename report, delete report, report list, show grid, show chart, show or hide totals, export reports, and more.
Export the JavaScript Pivot Table data to Excel, PDF, and CSV formats. You can also customize the exported document by adding header, footer, and cell properties like type, style, and position programmatically.
Ships with a set of stunning, built-in themes: Material, Fabric, Bootstrap, Tailwind CSS, and High Contrast.
You can customize the appearance of the control as little or as much as you like programmatically.
Enables users from different locales to use the control by formatting the date, currency, and numbering to suit locale preferences. The control uses an internalization (i18n) library for handling value formatting.
Supports right-to-left rendering and allows the text direction and layout of the control to be displayed from right to left.
You can localize all the control’s strings in the user interface as needed and use the localization (l10n) library to do so.
For a great developer experience, flexible, built-in APIs are available to define and customize the JavaScript Pivot Table control. Developers can optimize the data bound to the control and customize the user interface completely using code with ease.
JavaScript Pivot Table works on all major browsers across Windows, macOS, Linux, Android, and iOS devices. Our control is written in pure JavaScript and does not require any plugins on any modern web browser. It provides a seamless working experience for all Chrome, Firefox, Edge, Safari, and Opera browsers.
Easily get started with the JavaScript Pivot Table (pivot grid) using a few simple lines of HTML and TypeScript code, as demonstrated in the following. Also explore our JavaScript Pivot Table example that shows you how to render and configure the Pivot Table in JavaScript.
<html>
<head>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
</head>
<body>
<div id="PivotView">
</div>
</body>
</html>import { PivotView, IDataSet } from '@syncfusion/ej2-pivotview';
let pivotObj: PivotView = new PivotView({
dataSourceSettings: {
columns: [{ name: 'Year' }, { name: 'Quarter' }],
values: [
{ name: 'Sold', caption: 'Units Sold' },
{ name: 'Amount', caption: 'Sold Amount' }
],
dataSource: getPivotData(),
rows: [{ name: 'Country' }, { name: 'Products' }]
},
width: '100%',
height: 290
});
pivotObj.appendTo('#PivotView');
function getPivotData() : IDataSet[] {
let pivotData: IDataSet[] = [
{ Sold: 31, Amount: 52824, Country: 'France', Products: 'Mountain Bikes', Year: 'FY 2015', Quarter: 'Q1'},
{ Sold: 51, Amount: 86904, Country: 'France', Products: 'Mountain Bikes', Year: 'FY 2015', Quarter: 'Q2'},
{ Sold: 21, Amount: 33505.5, Country: 'Germany', Products: 'Touring Bikes', Year: 'FY 2015', Quarter: 'Q1'},
{ Sold: 74, Amount: 126096, Country: 'Germany', Products: 'Mountain Bikes', Year: 'FY 2015', Quarter: 'Q1'},
{ Sold: 77, Amount: 131208, Country: 'United Kingdom', Products: 'Mountain Bikes', Year: 'FY 2015', Quarter: 'Q1'},
{ Sold: 92, Amount: 156768, Country: 'United Kingdom', Products: 'Mountain Bikes', Year: 'FY 2015', Quarter: 'Q2'},
{ Sold: 43, Amount: 73272, Country: 'United States', Products: 'Mountain Bikes', Year: 'FY 2015', Quarter: 'Q1'},
{ Sold: 43, Amount: 73272, Country: 'United States', Products: 'Mountain Bikes', Year: 'FY 2015', Quarter: 'Q2'}
];
return pivotData;
}The Pivot Table component is also available in Blazor, React, Angular, and Vue frameworks. Check out the Pivot Table in different platforms from the links below.
The Syncfusion JavaScript Pivot Table supports the following features:
You can find our JavaScript Pivot Table demo here.
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
A good place to start would be our comprehensive getting started documentation.
Documentation
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
