React Data Grid - Grouping and Aggregation

Group and Summarize Data Grid Records

Organize records into groups and calculate summary values within the Data Grid. Use grouping and aggregation features to analyze totals, counts, averages, and custom metrics across datasets.

No credit card required.

Try Our Live Demo

Trusted by the world's leading companies

Grouping in the React Data Grid.

Data grouping

Group records based on column values to organize related data into categories. Use this feature to analyse, compare, and review records within grouped datasets.

Aggregate in React Data Grid.

Aggregate calculations

Data Grid aggregation summarizes column values using built-in functions such as sum, average, minimum, maximum, and count. Custom aggregation formulas can be applied to display summary values in the Grid footer. Use this feature to review key metrics and analyse data across records.

Group aggregate in the React Data Grid.

Group aggregates

Display aggregate values within each group using caption and footer summaries. Each group maintains its own summary values based on the records it contains, including totals, counts, minimum, maximum, average, and custom aggregates. Use this feature to analyse and compare grouped data.

Caption and footer templates in React Data Grid.

Group caption and aggregate footer templates allow customized group captions and footer summaries with formatted values, counts, totals, and custom content. Use this feature when grouped data or summary information requires a custom presentation.

See Why Developers Love Syncfusion

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion reduces customers’ development time. Here are some of their experiences.

Ivan G.

Business Application Developer

The best tool to operate grid-like data out there

Good documentation helps you with everything you need to know. What I like the most is that it takes you from configuration to usage. I have mainly used grid and toolbar options along with dashboard.

Labeeb M.

Lead UI Developer

A Must-Have Tool for Fast Development with Top-Notch Support

We’ve been using Syncfusion Essential Studio for over 4 years, and it’s been a game-changer for our team. The components are incredibly versatile and cover almost every use case we’ve needed, from basic UI elements to complex Data Grids and charts. The ease of integration with our existing projects saved us countless hours during implementation. The documentation is straightforward, and even if we get stuck, their customer support team is super responsive—whether through live chat or tickets. We’ve raised nearly 50 tickets so far, and every single one was resolved quickly with clear solutions. The frequent updates with new features and improvements keep the library fresh and aligned with modern needs. It’s rare to find a tool that’s both powerful and easy to use, but Syncfusion nails it.

Frequently Asked Questions

✅ How can data be grouped by multiple columns in React Data Grid?

Yes. React Data Grid supports multi-column grouping, allowing records to be grouped by multiple fields to create hierarchical categories and analyze data at different levels.

✅ How can grouping be removed programmatically in React Data Grid?

React Data Grid provides built-in APIs to remove grouping from individual columns or reset all grouped columns programmatically. This enables grouping state to be reset based on user actions or application logic.

✅ Can aggregate values update automatically when data changes in React Data Grid?

Yes. React Data Grid supports reactive aggregates that automatically recalculate and update summary values when records are added, edited, or deleted. This helps keep totals, counts, averages, and other aggregate values synchronized with the latest data.

✅ Can grouped columns be reordered in React Data Grid for better data organization?

Yes. Grouped columns can be reordered to change the grouping hierarchy. This helps reorganize grouped data and adjust how records are categorized and displayed.

✅ Can grouped rows be expanded and collapsed programmatically in React Data Grid?

Yes. React Data Grid provides built-in APIs to expand or collapse individual groups or all grouped records programmatically. This helps control the visibility of grouped data based on application requirements and user interactions.

✅ Can group summaries be customized in React Data Grid?

Yes. React Data Grid provides customization options for displaying summary information within grouped records. This helps align grouped summary values with reporting and application requirements.

Resources

Learn more about React Data Grid Grouping and Aggregation

Explore demos, KB articles, and documentation to get the most out of the Data Grid.

Documentation

Explore guides, setup details, and quick-start tips.

Example demos

See live use cases in action.

Community forum

Ask, share, and connect with peers.

Knowledge base articles

Find solutions and best practices fast.

Contact support

Get expert help when needed.

Feature requests and bug reports

Track issues and suggest improvements.

See Real Success Stories

Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.

Read Our Customer Stories

Industry

Software development

75% Cost reduction

50% Faster development

“If somebody is looking for a great tool to work with? Yes. I would definitely recommend Syncfusion for anyone who is trying to develop something meaningful.”

- Somnath Maji (Founder of Igniatek Consultancy)

Read Story

Industry

Utilities (oil and gas)