Trusted by the world's leading companies

Data organization and summaries

Group records by selected fields and calculate totals, counts, averages, and custom summary values for large datasets.

Grouping in the React Data Grid.

Data grouping

Group records using one or more columns to keep related information together. Column-based organization is suitable when large collections need to be compared or reviewed by shared values.

Aggregate in React Data Grid.

Aggregate calculations

Grouping organizes related records into categories, while aggregates calculate summary values for groups or all records in the Data Grid. Categorized data can be analyzed using consolidated totals and summaries.

Group aggregate in the React Data Grid.

Group aggregates

Display aggregate values within each group using caption and footer summaries. Group-level summaries maintain values based on the records they contain, including totals, counts, minimum, maximum, average, and custom aggregates. Aggregate calculations support analysis and comparison of 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. Custom presentation requirements for grouped data or summary information can be addressed through caption and footer templates.

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 the React Data Grid?

The 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)