syidaxgrid
Home Pricing Settings

GRID FEATURE · PRO

Grouping and aggregation

Row grouping collects source rows with the same region or team into expandable groups. Unlike column groups, which organize headers, row groups change displayed rows and aggregation results.

Markdown source Features

How it works and when to use it

Do not add group rows directly to source data. Set grouping fields in groupBy and numeric aggregation through aggFunc. With multiple grouping fields, earlier array entries form outer groups.

Using this feature in a product requires the Pro package and a valid license. Matching setting names do not enable Pro features in Community.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Total quantity by region

Group orders by region and show a sum in the Quantity column.

javascript
grid.columnDefs = [
  { field: 'region', headerName: 'Region' },
  { field: 'quantity', headerName: 'Quantity', aggFunc: 'sum' },
];
grid.groupBy = 'region';

Verify the result: Collapse region groups for summaries and expand them for individual orders.

Example 2. Group by team within each region

Open the grouping panel so users can inspect and change criteria.

javascript
grid.groupBy = ['region', 'team'];
grid.groupPanel = true;
await grid.collapseAllRowGroups();

Verify the result: This creates Region → Team levels. Use expandAllRowGroups() to reveal all detail rows again.

Example 3. Combine filtering and pagination

First filter to completed orders, then expand groups. Reduce the page size to inspect whether group headers count toward displayed rows.

Verify the result: Show active filters so users do not confuse aggregation scope with the full source order count. Check rejection reasons in getGroupCheckStates() when reading group selection.

Combining features and troubleshooting

Do not build nested group keys by concatenating display labels. Call setRowGroupExpanded() with the actual key supplied by events.

Grouping, pivoting, and trees cannot all produce the same row list simultaneously. Choose the intended analysis mode and inspect the combination report.

Related reading