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.
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.
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).
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.
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.
The React Pivot Grid component supports data binding to local data or to an Online Analytical Processing (OLAP) cube. Developers can pull or create data within the client and bind it directly to the React PivotGrid component, depending on the application requirements. 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.
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.