What is Angular Pivot Grid & How to Get Started with It in Ignite UI?
In this post, we will review Pivot Grids and will explain what and when they are used for. Most importantly, we will cover in depth what Angular Pivot Grid is in particular and will show you how to easily get started with our Ignite UI for Angular Pivot Grid component.
In essence, Ignite UI for Angular offers a wide variety of high-performance angular grid components. The igx-grid component is probably the best choice for showing high-volume flat tabular data in an Angular application, but it also supports a compact master-detail with a custom non-tabular details view. The igx-tree-grid component is ideal for displaying hierarchical data with homogeneous schema with hierarchical aggregations on it. The igx-hierarchical-grid is the component allowing developers to show full table hierarchy for application scenarios requiring the visualization of large amounts of relational data. The only major grid component that Ignite UI was missing so far, was a pivot grid component, and igniteui-angular 13.1.0 introduces igx-pivot-grid with an accompanying pivot data selector component!
What is a Pivot Grid?
The most familiar reference to a pivot is probably the one in excel. A pivot grid gives users tabular UI where they can configure different dimension settings for rows and columns, as well as data filters and data aggregations. It basically allows for data view slice-and-dice. End-users prefer pivot views for large amounts of data to be brought down to a compact consumable view, which offers only the dimensions and the data relevant to what the user wants to see at a particular point of time.
What are pivot grids used for?
Unlike typical data grids and tables where you can create a static view, pivot grids and tables allow you to not only present the data from a given data table in the structure it is stored, but to also change the way data is being displayed. For example, imagine we have a pivot grid preset to show sales for products in different countries. In the current view we have periods separated by years and quarters, and we can see each country and products. But, if we want to switch the view, we can actually make it possible to filter the data and see how we’re doing not by country but by individual product instead in particular timeframe, years, and quarters.
Here’s an example of a sample pivot table view of profits aggregated by quarters and separated by country and product.
This visualization is done by using the new igx-pivot-grid component. The view is not fixed only to these dimensions. The component allows me to change the way I see the data by dragging and dropping columns into the corresponding bands for row and column dimensions, as well as to add other aggregations and filters. All I need to do to see the same data in the example above, but broken down by product first, and then by country for each product, is to switch the product and country chips in the column dimensions strip.
Angular Pivot Grid Data
The visualization shown above suggests a complex structure of the data the grid is bound to. However, this is not the case. The grid binds directly to a flat data collection. Aggregations and dimension transformations are performed by the underlying client-side grid engine according to configurations provided by the developer or defined by end-users through interactions with the UI. This is what an individual data record the grid above is bound to looks like:
{ "Country": "UK", "Product": "Vermont", "Units Sold": "501", "Manufacturing Price": 15, "Sale Price": 23, "Gross Sales": 26440, "Discounts": null, "Sales": 26440, "COGS": 16185, "Profit": 11255, "Date": "1/1/20", "Month Name": "January", "Year": "2020"}
So what about OLAP services and cube data?
The igx-pivot-grid is a client-side Angular component, which expects JSON data. If you have an OLAP service, you can use it with this pivot grid. The component exposes hooks, which allow you to override (opt out of) the client-side functionality and hand-over all the cube work to your OLAP service. The grid will just display the data that your service returns.
And is there UI for adding dimensions?
Yes, there is. We call this the pivot data selector. I intentionally didn’t show it in the screenshots above, in order to focus on the pivot table. Continuing the example above, I may want to see aggregations of the revenue in addition to the profit.
I can also change the visualization completely by switching which data columns are shown as row and which by column dimensions. Here’s the same data but showing country records by quarters aggregated by product sales and profits.
How to Get Started with the Ignite UI for Angular Pivot Grid?
If you’ve never used Ignite UI for Angular before, I suggest you go to the general getting started first and then to proceed with the articles on the pivot grid. Component documentation is accompanied by live running samples with code inside. One of the things you need to get started is data. If you don’t have your data ready and available when you want to try the component for the first time, you can always use the sample data, which we’ve used in the samples. If you get stuck, or simply want to share your experience with the components, you can always get a hold of somebody on the Infragistics team in the Infragistics Discord server. You can also submit issues in the Ignite UI for Angular GitHub repository.
And in case you are searching for a complete set of Material-based UI widgets, components & sketch UI kits, check out the comprehensive Ignite UI library for Angular and Angular data grids.
Or why not even go for our brand-new WYSIWYG drag-and-drop App Builder software to speed up development time and cut development time and costs.
