React Pivot Grid

Overview

Expand the reporting capabilities of your dashboard in no time with the React Pivot Grid (also called Pivot Table). This interactive component enables your user to cross-intersect and summarize table data in multiple ways and use advanced calculations. You can data-bind the KendoReact Pivot Grid to an OLAP service and customize it extensively.

See React Pivot Grid demo

React Pivot Grid component

Filtering

With filtering enabled, the React Pivot Grid component can be manipulated to display only data matching specific criteria set by the user. The user can enjoy lightning-fast Pivot Table response and a variety of filtering options, including 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. The KendoReact PivotGrid supports filtering via XMLA access to the OLAP Cube service.

See React Pivot Grid filtering demo

Sorting

Through the sorting functionality of the React Pivot Table, 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 React Pivot Grid sorting demo

Configurator

To make interacting with the Pivot Grid intuitive and easy for end-users the component offers a configurator interface. This configurator is a list of fields through which users can apply modifications such as filtering, as well as what fields to pivot against.. Since the configurator it is key in the UX of the Pivot Grid – a sort of an admin panel for the user - it is built to be highly customizable to be able to match your app’s design and meet various requirements. For example, developers have the flexibility of replacing nested elements or entire components used in the configurator (such as the React Editor, React Form and FormElement) with custom components.

See React Pivot Grid configurator demo

Customization

You can customize many aspects of the React Pivot Table: from applying custom width and height to specific rows and columns to providing custom components. Each cell, row and column can have a custom look, and this also applies to the header row and columns.

See React Pivot Grid customization demo

Data Binding

The React Pivot Grid component supports data binding to an Online Analytical Processing (OLAP) cube. OLAP allows access to data that is aggregated and organized in a multidimensional structure called a "cube." OLAP tools enable users to interactively perform analysis over multidimensional data. You can also refer to our article on how to setup an OLAP cube if you have questions around it.

See React Pivot Grid data binding article

Styling & Themes

As with every KendoReact component, the React PivotGrid comes with three out-of-the-box themes: Bootstrap, Material and kendo UI Default. Each theme can be used as-is, or customized by taking advantage of the available Sass variables to make each theme your own. To make customization even easier there is also the KendoReact Theme Builder which can create a custom theme with just a few clicks.

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.