---
title: "Easily Group Data into Ranges in Web Applications Using Pivot Table"
published_at: "2023-02-09T12:28:28+00:00"
modified_at: "2026-06-15T12:53:51+00:00"
url: "https://www.syncfusion.com/blogs/post/easily-group-data-into-ranges-in-web-applications-using-pivot-table"
excerpt: "In this blog, we will walk through how to group data into ranges with real-time examples using the Pivot Table in a web application."
taxonomy_category:
  - "Angular"
  - "ASP.NET Core"
  - "ASP.NET MVC"
  - "Development"
  - "JavaScript"
  - "React"
  - "TypeScript"
  - "Vue"
  - "Web"
taxonomy_post_tag:
  - "Angular"
  - "grouping data"
  - "JavaScript"
  - "Pivot Table"
  - "React"
  - "Web Development"
---

# Easily Group Data into Ranges in Web Applications Using Pivot Table

[Hari Venkatesh E](https://www.syncfusion.com/blogs/author/harivenkateshe)

![Easily Group Data into Ranges in Web Applications Using Pivot Table](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Easily-Group-Data-into-Ranges-in-Web-Applications-Using-Pivot-Table-1.png)


Frequency distribution categorizes and positions input data in appropriate groups. This occurs in ranges for better statistical analysis. A pivot table is a type of component that allows users to categorize and view input data like in a frequency distribution table. You can group date, number, and text fields in a pivot table into ranges.

For example:

- We can group the birth rate around the world over the last three years, quarter by quarter (date type), into 2019 (Q1, Q2, Q3, Q4), 2020 (Q1, Q2, Q3, Q4), and 2021 (Q1, Q2, Q3, Q4).
- We can divide the world population into age groups (number type) such as 0-20, 21-40, 41-60, 60-and-above.
- We can also group populations of countries (string type) into the continents of North America, South America, Europe, Asia, Africa, and Australia.

In this blog, we will walk through how to group data into ranges with a real-time scenario.

## Group data using date and time

To begin with, we will group data based on date and time ranges. In this illustration, we will see YouTube videos published by a channel in English and Hindi and the number of likes and comments for them during specific time periods.

First, insert the **Years** field into the pivot table’s ** row** axis, the** Language of the Video** field into the ** column** axis, and ** Video URL** (to get the number of videos), ** Likes**, and ** Comments** into the ** value** axis.

When you right-click on the **Years** field, a context menu with the option Group appears. When you select ** Group**, a dialog appears in which you can enter the start and end dates, as well as the interval type. Since we are grouping by date type, the Interval dropdown will display the following options: years, quarters, months, days, hours, minutes, and seconds. As a result, we will get the following output.

![Group option in the context menu to group by date and time](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Group-option-in-the-context-menu-to-group-by-date-and-time.png)

Group option in the context menu to group by date and time

![Group dates from 2005 to the present by year, quarter, and month](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Group-dates-from-2005-to-the-present-by-year-quarter-and-month.png)

Group dates from 2005 to the present by year, quarter, and month

![Pivot Table displaying YouTube video details organized by date and time](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Pivot-Table-displaying-YouTube-video-details-organized-by-date-and-time.png)

Pivot Table displaying YouTube video details organized by date and time

**Note:** By default, the dates excluded from the date range will be grouped under the Out of Range category. We can also customize the name Out of Range.

## Group data using number type

Following the date and time is the number type. In this illustration, we will see used car sales divided into ranges of kilometers driven for various car brands. To make the classification, the number of cars in these ranges are tabulated along with sales amount details: 0–100,000 kms, 100,001–200,000 kms, 200,001–300,000 kms, and greater than 300,000 kms.

To do this, insert the **kms Driven** field in the pivot table’s column axis, ** Car Name** in the row axis, and ** No. of cars sold** and ** Sold amount** in the value axis.

When you right-click the **kms Driven** field, a context menu with the Group option will appear. When you select ** Group**, a dialog appears in which you can enter the start and end numbers, as well as the interval count. Refer to the following output images.

![Group option in the context menu to group by kilometers](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Group-option-in-the-context-menu-to-group-by-kilometers.png)

Group option in the context menu to group by kilometers

![Kilometers from 0 to 300,000 are divided into groups of 100,000](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Kilometers-from-0-to-300000-are-divided-into-groups-of-100000.png)

Kilometers from 0 to 300,000 are divided into groups of 100,000

![Pivot Table displaying information about used car sales](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Pivot-Table-displaying-information-about-used-car-sales.png)

Pivot Table displaying information about used car sales

**Note:** By default, the numbers excluded will be grouped under the Out of Range category. The name Out of Range can be customized.

## Group data by string type

Finally, we’ll use the custom format to format the string data type. To illustrate this, we will return to the previous example of used car sales, where car names of string data type are grouped based on their brand name.

Insert the **kms Driven** field in the pivot table’s column axis, ** Car Name** in the row axis, ** No. of cars sold** and ** Sold amount** in the value axis.

To group the custom format field members, select the appropriate header(s) by holding down the **Ctrl** or ** Shift** key and right-clicking; a context menu with the option Group appears. When you select ** Group,** a dialog box appears in which you can enter the field caption and group name**.** In our illustration, we enter ** Brand** in the field caption and ** Audi** in the group name**,** resulting in the creation of a new field, Brand, in the row axis on top of the Car Name field. And the selected header(s) are added to the group created under the group name Audi. We get the following output.

![Pivot Table displaying information about used car sales](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Pivot-Table-displaying-information-about-used-car-sales-1.png)

Pivot Table displaying information about used car sales

![Group option in the context menu to group Audi car names](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Group-option-in-the-context-menu-to-group-Audi-car-names.png)

Group option in the context menu to group Audi car names

![With the new Brand field, group car names under the name Audi](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/With-the-new-Brand-field-group-car-names-under-the-name-Audi.png)

With the new Brand field, group car names under the name Audi

![Pivot Table displaying all Audi car names grouped under Audi](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Pivot-Table-displaying-all-Audi-car-names-grouped-under-Audi.png)

Pivot Table displaying all Audi car names grouped under Audi

Audi car names are now grouped under one name, Audi, while other car names are listed under their names, such as Ambassador CLASSIC 1500 DSL AC, on top of Audi. You can group Ambassador cars under their brand. To do so, expand the appropriate headers and select the car names. As usual, right-click and select **Group**. Retype ** Brand** in the field caption and ** Ambassador** in the group name.

![Group option in the context menu to group other car names by brand.](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Group-option-in-the-context-menu-to-group-other-car-names-by-brand..png)

Group option in the context menu to group other car names by brand

![With the existing Brand field, group car names under the Ambassador brand](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/With-the-existing-Brand-field-group-car-names-under-the-Ambassador-brand.png)

With the existing Brand field, group car names under the Ambassador brand

You can do the same for all other car names, and the end result is shown in the following images.

![Pivot Table displaying information on used car sales by brand](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Pivot-Table-displaying-information-on-used-car-sales-by-brand.png)

Pivot Table displaying information on used car sales by brand

![Pivot Table displaying information on used car sales by brand](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Pivot-Table-displaying-information-on-used-car-sales-by-brand-2.png)

Pivot Table displaying information on used car sales by brand

## Ungrouping

You can ungroup applied date, number, and string grouping by right-clicking the appropriate header and selecting **Ungroup** from the context menu in the Pivot Table.

![Clearing the grouped data using the context menu UI](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Clearing-the-grouped-data-using-the-context-menu-UI.png)

Clearing the grouped data using the context menu UI

## Editing groups

You can edit the date- and number-based grouping by right-clicking and selecting **Group** from the context menu. The existing grouping information is preserved (state persisted) and we can modify that at any time.

In the case of a custom format, such as string, we have to remove the newly created field, and restart grouping from the beginning. There is no direct edit or modify option for the custom format.

## Documentation references

- TypeScript: [Grouping in JavaScript Pivot Table control](https://ej2.syncfusion.com/documentation/pivotview/grouping/#grouping)
- JavaScript: [Grouping in JavaScript Pivot Table control](https://ej2.syncfusion.com/javascript/documentation/pivotview/grouping/)
- Angular: [Grouping in Angular Pivot Table component](https://ej2.syncfusion.com/angular/documentation/pivotview/grouping/)
- React: [Grouping in React Pivot Table component](https://ej2.syncfusion.com/react/documentation/pivotview/grouping/)
- Vue: [Grouping in Vue Pivot Table component](https://ej2.syncfusion.com/vue/documentation/pivotview/grouping/)
- ASP.NET Core: [Grouping in ASP.NET Core Pivot Table control](https://ej2.syncfusion.com/aspnetcore/documentation/pivot-table/grouping)
- ASP.NET MVC: [Grouping in ASP.NET MVC Pivot Table component](https://ej2.syncfusion.com/aspnetmvc/documentation/pivot-table/grouping)


## Conclusion

We hope this article gave you a better understanding of grouping data into ranges in the Pivot Table. Try it out and leave your feedback in the comments section.

Thanks for reading!

Our Pivot Table is available in our [Blazor](https://www.syncfusion.com/blazor-components/blazor-pivot-table)
, ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/pivot-table)
, [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/pivot-table)
, [Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/pivot-grid)
), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-pivot-table)
, [Angular](https://www.syncfusion.com/angular-ui-components/angular-pivot-table)
, [React](https://www.syncfusion.com/react-ui-components/react-pivot-table)
, and [Vue](https://www.syncfusion.com/vue-ui-components/vue-pivot-table)
 component suites. Use it to organize and summarize business data elegantly in any application!

For existing customers, the newest version of Essential Studio® is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads)
 page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads)
 to check out the available features.

For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums)
, [support portal](https://support.syncfusion.com)
, or [feedback portal](https://www.syncfusion.com/feedback/)
. We are always happy to assist you!

## Related blogs

- [Server-Side Engine in JavaScript Pivot Table: An Overview](https://www.syncfusion.com/blogs/post/server-side-engine-in-javascript-pivot-table.aspx)
- [How to Bind Remote Data and Enable Virtual Scrolling in JavaScript Pivot Table](https://www.syncfusion.com/blogs/post/bind-remote-data-and-enable-virtual-scrolling-in-javascript-pivot-table.aspx)
- [CSV Data Sources in Blazor Pivot Table: A Groundbreaking Feature](https://www.syncfusion.com/blogs/post/csv-data-sources-in-blazor-pivot-table-a-groundbreaking-feature.aspx)
- [Tips and Tricks to Quickly Render the Pivot Table for Web](https://www.syncfusion.com/blogs/post/tips-and-tricks-to-quickly-render-the-pivot-table.aspx)