Angular PivotGrid

The Angular PivotGrid allows you to connect to OLAP or tabular data and display it in multiple dimensions much like the Pivot Tables you see in Microsoft Excel. This version is the initial Beta release and the intent is to get you started. More features will roll out over the coming months. You can easily bind remote or local data and programmatically configure dimensions, measures, axes, theming, and more. Check out the Getting Started article to see how powerful and easy it is!

See the Angular PivotGrid demo

The Angular PivotGrid supports binding to a local data source or a remote OLAP service via HTTP. When binding to a local source, you simply define the dimensions, measures, and axes. Binding to a remote OLAP service is a more advanced concept but We provide help. The documentation describes not only how to connect the PivotGrid to the data source, but also explains OLAP fundamentals and how to set up an OLAP cube. Also included is a hosted OLAP service you can use to test against. 

See the Angular PivotGrid Data Binding documentation

For a familiar and intuitive UX, the Angular PivotGrid includes a configuration panel or configurator for short. This UI is similar to what users see in Microsoft Excel and includes a list of fields through which users can apply modifications such as filtering, as well as what fields to pivot against. This panel is highly customizable so it can match your app's design and help you meet your requirements. Developers can even go as far as replacing the default elements with their own custom components.

See the Angular PivotGrid Configurator demo

Filtering is a key feature of any PivotGrid. With the Kendo UI for Angular PivotGrid, users can easily set criteria to narrow the data view to only what they'd like to see. Filtering options include filtering of specific values, using operators (e.g. "contains" or "starts with"), or filtering by a pre-defined field, such as a time period. Filtering can be applied to both rows and columns.

See the Angular PivotGrid Filtering demo

Along with filtering, sorting is a key feature of any Angular pivot grid. With the Kendo UI for Angular PivotGrid, users can choose to sort a single column or multiple columns and show data in an ascending or descending order. This sorting feature can be enabled on any data type in the PivotGrid such as date, geography, or KPI. Sorting can be added with a single property that enables users to sort by clicking the header of a column or row. Clicking multiple times allows users to sort the items in an ascending and descending order or no sort order at all (removing any applied sorting).

See the Angular PivotGrid Sorting demo

The Kendo UI for Angular PivotGrid offers a configurable row and column virtualization, enabling you to seamlessly display large data sets without compromising performance. While a user is scrolling the table, the component renders only a predefined number of rows and columns, corresponding to the current scroll position.  

See the Angular PivotGrid Virtualization demo  

The Angular PivotGrid offers users the ability to visualize the data analysis they perform within the component in a chart. This is done via integration with the Kendo UI for Angular Charts component, and we provide a demo and instructions on how to perform this integration.

See the Angular PivotGrid and Chart demo

The Angular PivotGrid supports localization out of the box. The UI will adjust to the current user's local by automatically displaying the correct symbols and default formats according to the language requirements. Additionally, the messages are well organized for easy translation.

As part of our commitment to both user experience and accessibility, we build keyboard support into the Angular PivotGrid. Users can navigate and interact with the component using a selection of keyboard shortcuts. 

See the Kendo UI for Angular Keyboard Navigation demo

Like all Kendo UI for Angular components, the Angular pivot grid is continuously reviewed and updated to comply with the latest accessibility standards. It is compliant with Section 508 and WAI-ARIA standards and is AAA rated with WCAG.

We support every popular web development framework and strive for parity among our component libraries. You can find the DateTimePicker for these popular platforms:

• React
• jQuery
• ASP.NET Core
• ASP.NET MVC