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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

syncfusion trusted companies


Angular 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 such as 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.

High performance

Allows users to load large amounts of raw data into the pivot engine, aggregate it, and view it on-demand through virtual scrolling options with ease.

Data binding

Angular pivot table control renders with relational data source in JSON format

JSON format

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.

Angular pivot table control renders with relational data source in CSV format

CSV format

You can also bind CSV data to the control. The CSV data can be obtained from a local file, remote file, or web service.

Angular pivot table control renders with olap data source

OLAP data binding

The Angular Pivot Table can be connected to an OLAP cube, and its result can be visualized in both tabular and graphical formats.

Remote data binding, remote web service and RESTful API, in Angular pivot table control

Remote data binding

Binding the Angular 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. Data Manager supports various data adaptors such as JSON, OData, ODataV4, URLs, and web APIs for working with particular data services.

Pivot Chart

The Angular 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.

Angular pivot table and pivot chart

Optimized for mobile devices

Touch support for Angular pivot table control

Touch support

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 view of Angular pivot table control


Responsive support allows the control to be viewed on various devices.

Field list support in Angular pivot table control to create reports dynamically at run-time

Adaptable field list UI

The Pivot Table field list can be displayed on various devices in a presentable manner.

Angular pivot table control along with field list and grouping bar

Pivot Table field list and group fields

The Angular 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.

Drill down and drill up

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.

Angular pivot table with drill up and drill down support

JavaScript pivot table with defer layout update support

Defer layout update

Users can refresh the control on demand instead of during every UI interaction in the Pivot Table.

Editing and updating

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 control supports various edit modes such as inline, dialog, batch edit, and column edit through an interactive UI.

JavaScript pivot table with editing and updating support


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.

Angular Pivot Table normal filter

Header filtering

Display only selected values for a field. This can be achieved either through the UI or programmatically.

Angular pivot table label filtering

Label filtering

Use Excel-like filtering options across column and row headers based on label text, date, or number.

Angular pivot table value filtering

Value filtering

Use Excel-like filtering options across column and row headers based on grand-total values.


Order column and row header text either in ascending or descending order.

Normal Sorts in ascending and descending order using Angular pivot table

Header sorting

Orders the column and row header text either in ascending or descending order.

Column sorts in ascending and descending order using Angular pivot table

Column sorting

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.

Aggregation support in Angular pivot table control


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

Calculated fields, otherwise known as unbound fields, generate unique fields with your own calculated values by executing a simple user-defined formula.

Calculated field, user-defined field in Angular pivot table control

JavaScript pivot table with drill through

Drill through

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.

Angular pivot table control totals

Conditional formatting support in Angular pivot table control

Conditional formatting

Allows users to define conditions that, when met, format font style, text color, background color, and font size for values and summary cells.

Number formatting and date formatting

Number formatting and date formatting help transform the appearance of the actual cell value.

Number formatting and date formatting in Angular pivot table control

Angular pivot table grouping date and number

Group dates and numbers

The Angular 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.

Frozen headers

You can freeze row and column headers to compare cell values with the corresponding row and column headers.

Freezes row and column headers in Angular pivot table control

Columns and rows

Resizes columns in Angular pivot table control


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.

Reorders columns in Angular pivot table control


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.

Hyperlink in JavaScript pivot table control

Users can retrieve information about a particular cell on clicking a hyperlink cell. It later allows them to perform custom operations programmatically.

Cell selection in JavaScript pivot table control

Cell selection

Select a range of cells.

Tooltip in JavaScript pivot table control


A tooltip provides basic information about a cell while hovering over it with the pointer.

Cell template support in Angular pivot table control

Cell templates

With cell templates, users can add features like images, check boxes, and text nodes to any cell with ease.

Toolbar option in JavaScript pivot table control


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 Angular 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.

Exports report to Excel, PDF and CSV in Angular pivot table control

Custom styles and themes

Built-in theme support in Angular pivot table control

Built-in themes

Ships with a set of four stunning, built-in themes: Material, Fabric, Bootstrap, and high contrast.

Custom CSS for Angular pivot table control

Custom styling

You can customize the appearance of the control as little or as much as you like programmatically.

Globalization and localization

Globalization support in Angular pivot table control


Enables users from different locales to use the control by formatting the date, currency, and numbering to suit locale preferences. This uses an internalization (i18n) library for handling value formatting.

Right to left, RTL support in Angular pivot table control

Right to left (RTL)

Supports right-to-left rendering and allows the text direction and layout of the control to be displayed from right to left.

Localization support in Angular pivot table control


You can localize all the control’s strings in the user interface as needed and use the localization (l10n) library to do so.

Developer-friendly API

For a great developer experience, flexible built-in APIs are available to define and customize the Angular Pivot Table control. Developers can optimize the data bound to the control and customize the user interface completely using code with ease.

Angular pivot table supports cross-browsers

Cross-browser compatibility

The Angular 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 browsers. It provides a seamless working experience for all Chrome, Firefox, Internet Explorer, Safari, and Opera browsers.

Angular Pivot Table Code Example

Easily get started with Angular Pivot Table using a few simple lines of HTML and TS code, as demonstrated below. Also explore our Angular Pivot Table Example that shows you how to render the Angular Pivot Table Component.

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings width='100%' height='290'
import { Component, OnInit } from '@angular/core';
import { IDataOptions, IDataSet } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { enableRipple } from '@syncfusion/ej2-base';

 * Pivot Table Default Sample.

    selector: 'ej2-pivotview-container',
    styleUrls: ['default.css'],
    templateUrl: 'default.html'

export class DefaultComponent implements OnInit {
    public dataSourceSettings: IDataOptions;
    public gridSettings: GridSettings;

    getPivotData(): IDataSet[] {
        let pivotData: IDataSet[] =
		 [{ 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },
            { 'Sold': 16, 'Amount': 23989, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },
            { 'Sold': 66, 'Amount': 93989, 'Country': 'Canada', 'Products': 'Van', 'Year': 'FY 2016', 'Quarter': 'Q3' },         
            { 'Sold': 40, 'Amount': 59965, 'Country': 'United Kingdom', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },
            { 'Sold': 80, 'Amount': 127640, 'Country': 'United States', 'Products': 'Touring Bikes', 'Year': 'FY 2018', 'Quarter': 'Q4' }];
			return pivotData;

    ngOnInit(): void {
        this.gridSettings = {
            columnWidth: 140
        } as GridSettings;

        this.dataSourceSettings = {
            enableSorting: true,
            columns: [{ name: 'Year' }, { name: 'Quarter' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
            dataSource: this.getPivotData(),
            rows: [{ name: 'Country' }, { name: 'Products' }],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            expandAll: false,
            filters: []

Other supported frameworks

Pivot Table is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different Pivot Table platforms from the links below,

Angular version compatibility

With continuous improvement in Angular versions, the Angular Pivot Table is kept up to date to make it compatible with the latest version.


Frequently Asked Questions

  • High performance pivot engine and virtualization that helps load large volumes of data quickly.
  • Supports both relational and OLAP data sources. The relational data source can use input data via JSON, RESTful services, OData services, and WCF services, and more.
  • Organize and summarize pivot data in a grid and chart.
  • Easily filter, sort, aggregate, and group pivot data.
  • View detailed or abstract data using drill down or up.
  • Experience seamless interaction and editing capabilities.
  • One of the best Angular Pivot Table in the market that offers feature-rich UI to interact with the software.
  • Simple configuration and API.
  • Supports all modern browsers.
  • Mobile-touch friendly and responsive.
  • Expansive learning resources such as demos, documentation and videos to learn quickly and get started with Angular Pivot Table.

We do not sell the Angular Pivot Table separately. It is only available for purchase as part of the Syncfusion Angular suite, which contains over 70 Angular components, including the Pivot Table. A single developer license for the Syncfusion Essential Studio for Angular suite costs $995.00 USD, including one year of support and updates. On top of this, we might be able to offer additional discounts based on currently active promotions. Please contact our sales team today to see if you qualify for any additional discounts.

You can find our Angular Pivot Table demo here.

No, our 70 Angular components, including Pivot Table, are not sold individually, only as a single package. However, we have competitively priced the product so it only costs a little bit more than what some other vendors charge for their Pivot Table alone. We have also found that, in our experience, our customers usually start off using one of our products and then expand to several products quickly, so we felt it was best to offer all 70 Angular components for a flat fee of $995/developer. On top of this, we might be able to offer additional discounts based on currently active promotions. Please contact our sales team today to see if you qualify for any additional discounts.

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.

Read independent,
authenticated reviews
on G2

Download Now Pricing

What do our customers say about us?

double quotes

Using Syncfusion Angular and JavaScript controls makes front-end web development a piece of cake. Each component has many properties that can be configured as per your desire, methods that can be used to interact with the element, and a lot of events that trigger at different stages, which makes modifying your components according to the state of the application an easy task. Also, their support is amazing! They always offer a sample working project, which makes it very simple to solve your question about your code.
Carlos Rodriguez Garcia

Carlos Rodriguez Garcia


double quotes

We started using Syncfusion Angular controls for the Scheduler to offer our providers a way to schedule their availability and automate our administrative process to show availability and gaps in schedules. This helped us provide the best user experience and deliver care to our patients in a timely manner.
Tim Rankel

Tim Rankel

Senior Developer at MeMD

Transform your applications today by downloading our free evaluation version Download Free Trial


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.

Up arrow icon

Warning Icon 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.Close Icon

Live Chat Icon For mobile