JavaScript Pivot Table - Syncfusion JavaScript UI Controls

The JavaScript Pivot Table is a powerful control used to organize and summarize business data and display the result in a cross-table format. This control 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.

syncfusion javascript pivot table control showcase

Features and Benefits

High performance

JavaScript Pivot Table 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

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.

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.

OLAP data binding

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

Remote data binding

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

Pivot chart

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.

Optimized for mobile devices

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.

Responsiveness

Responsive support allows the control to be viewed on various devices in JavaScript Pivot Table.

Adaptable field list UI

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

Pivot Table field list and group fields

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.

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.

Drill operation documentation

Defer layout update

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

Defer layout update documentation

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.

Editing and updating documentation

Filtering

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.

Header filtering

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

Normal filtering documentation

Label filtering

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

Label filtering documentation

Value filtering

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

Value filtering documentation

Sorting

Header sorting

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

Normal sorting documentation

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

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.

Drill through

The drill-through feature easily obtains a list of raw items for a particular value cell or summary cell.

Totals

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.

Show or hide totals documentation

Conditional formatting

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.

Conditional formatting documentation

Number formatting and date formatting

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

Format settings in API documentation

Group dates and numbers

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

Grouping date and number documentation

Frozen headers

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

Columns and rows

Resize

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.

Reorder

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.

Column reorder documentation

Hyperlink

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

Cell selection

Select a range of cells.

Cell selection documentation

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

Cell templates

With cell templates, users can add features like images, check boxes, 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.

Exporting

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.

Custom styles and themes

Built-in themes

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

Custom styling

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

Globalization and localization

Globalization

Globalization 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)

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

Localization

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 JavaScript Pivot Table control. Developers can optimize the data bound to the control and customize the user interface completely using code with ease.

Cross-browser compatibility

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

Web framework integration

As a pure JavaScript component, the pivot table control integrates easily with any web framework:

Learn More about JavaScript Pivot Table

About Syncfusion JavaScript UI Controls

Syncfusion's JavaScript UI controls library is the only suite that you will ever need to build an application since it contains over 70 high-performance, lightweight, modular, and responsive UI controls in a single package. In addition to Pivot Table, we provide popular JavaScript Controls such as DataGrid, Charts, Scheduler, Diagram, and Word Processor.

About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today we provide 1700+ controls and frameworks for web (Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Flutter), mobile (Xamarin, Flutter, UWP, JavaScript, and MAUI), and desktop development ( WinForms, WPF, WinUI, and UWP, Flutter, and MAUI). We provide ready-to deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

sales@syncfusion.com | www.syncfusion.com | Toll Free: 1-888-9 DOTNET