---
title: Overview
position: 1
seo_title: Overview of the PivotGrid Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  PivotGrid component and its types, check out the extensive set of available
  options in its live demo.
---
## PivotGrid Overview

A PivotGrid is a powerful tool for displaying and analyzing complex data. It enables users to arrange large volumes of data in a pivot table structure. PivotGrid aggregates (for example, SUM and COUNT) summarize data across different dimensions, offering insights into trends, patterns, and relationships within the dataset.

Key features of the PivotGrid component include the configuration of columns, rows, and measure fields, as well as operations like data filtering and sorting.

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/pivotgrid/"},{"text":"Blazor","url":"https://docs.telerik.com/blazor-ui/components/pivotgrid/overview"},{"text":"jQuery","url":"https://docs.telerik.com/kendo-ui/controls/pivotgrid/overview"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/pivotgrid/"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/pivotgrid-wrapper/"},{"text":"ASP.NET Core","url":"https://docs.telerik.com/aspnet-core/html-helpers/data-management/pivotgrid/overview"},{"text":"ASP.NET MVC","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/pivotgrid/overview"}],"demo":"components/pivotgrid/overview"}'></LiveDemo>

### Appearance

The PivotGrid component provides built-in styling options that grant visually appealing and flexible rendering experience.

Apart from the default vision of the Telerik and Kendo UI PivotGrid, the component supports alternative styling options which enable you to configure the individual aspects of its appearance.

#### Anatomy

The anatomy of the PivotGrid summarizes the elements of the component.

<BlueprintImage data='{"description":"","labels":[{"text":"Header root cell - Expanded"},{"text":"Child root cell"},{"text":"PivotGrid cell"},{"text":"Total PivotGrid cell"},{"text":"Configurator button"}]}'>![A Telerik and Kendo UI PivotGrid component with root cells, header cells, total cells, normal cells, and configurator button.](images/components-pivotgrid2-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI PivotGrid including the root cells, header cells, total cells, normal cells and configurator button.")</BlueprintImage>

#### Configurator

The **Change settings** button triggers the PivotGrid Configurator. It supports different rendering options depending on the orientation of the Configurator panel. 

##### Vertical Configurator

<BlueprintImage data='{"description":"","labels":[{"text":"Vertical Configurator with right alignment (Default)"},{"text":"Vertical Configurator with left alignment"}]}'>![The Telerik and Kendo UI PivotGrid component demonstrating the right and left alignment of the vertical configurator](images/components-pivotgrid2-overview-vertical-configurator-2-.png "The Telerik and Kendo UI PivotGrid in vertical orientation showing the right and left configurator alignment.")</BlueprintImage>

##### Horizontal Configurator

<BlueprintImage data='{"description":"","labels":[{"text":"Horizontal Configurator with top alignment "},{"text":"Horizontal Configurator with bottom alignment"}]}'>![The Telerik and Kendo UI PivotGrid component demonstrating the top and bottom alignment of the horizontal configurator.](images/components-pivotgrid2-overview-horizontal-configurator.png "The Telerik and Kendo UI PivotGrid in horizontal orientation showing the top and bottom configurator alignment.")</BlueprintImage>

#### Sorting and Filtering

The PivotGrid helps users configure the table's content by using the sorting and filtering options available in the settings panel.

<BlueprintImage data='{"description":"","labels":[{"text":"Sort data"},{"text":"Include fields"},{"text":"Filter data"}]}'>![The Telerik and Kendo UI PivotGrid component demonstrating the sorting, include fields, and filtering options.](images/components-pivotgrid2-overview-sorting-and-filtering.png "Available settings options in the Telerik and Kendo UI PivotGrid component including sorting and filtering data.")</BlueprintImage>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular PivotGrid","description":"Find more information about the Kendo UI for Angular PivotGrid in the official product documentation of the component.","url":"https://www.telerik.com/kendo-angular-ui/components/pivotgrid/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor PivotGrid","description":"Find more information about the Telerik UI for Blazor PivotGrid in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/pivotgrid/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery PivotGrid","description":"Find more information about the Kendo UI for jQuery PivotGrid in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/pivotgrid/overview"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact PivotGrid","description":"Find more information about the KendoReact PivotGrid in the official product documentation of the component.","url":"https://www.telerik.com/kendo-react-ui/components/pivotgrid/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue PivotGrid","description":"Find more information about the Kendo UI for Vue PivotGrid in the official product documentation of the component.","url":"https://www.telerik.com/kendo-vue-ui/components/pivotgrid/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core PivotGrid","description":"Find more information about the Telerik UI for ASP.NET Core PivotGrid component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/data-management/pivotgrid/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC PivotGrid","description":"Find more information about the Telerik UI for ASP.NET MVC PivotGrid component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/pivotgrid/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>