In this post, we will review the PivotGrid component. Unlike a typical grid, a PivotGrid lets you change the way the data is presented. For example, you may have a data set with inventory items that include the number in stock, category, store, and quarter. You can create a PivotGrid to analyze the total inventory in stock by store and by quarter. Or, you can view the inventory in stock by category and by store. These different perspectives can be viewed in the same grid just by selecting which fields to use for the row and column of the grid. In a regular grid, you could only create one static view.
Getting Started
We will need the PivotGrid, the PivotConfigurator, and the PivotDataSource components. The PivotGrid displays our summarized data. The PivotConfigurator helps us build the PivotGrid. And the PivotDataSource is an extension of the DataSource component used to bind our data to the PivotGrid and PivotConfigurator. First, we will initialize our project using the Vue webpack-simple template. Then, we will install Kendo UI, a theme, the PivotGrid package, and the DataSource package.