Grouping and aggregation PRO
Group rows with equal values and aggregate numeric columns.
Options
Changes below update the Grid and code immediately.
This menu starts grouped by team. Inspect Platform, Design, and other groups and their numeric aggregates.
View code
Sample data included in the code · 6 rows
Usage guide
#Group orders by team and inspect each team's total quantity. Move between summaries and source orders in one table.
Try it yourself
- Inspect team summaries
This menu starts grouped by team. Inspect Platform, Design, and other groups and their numeric aggregates.
- Expand a group
Click a group's expand button to inspect its orders. Click again to collapse them.
- Compare with source data
Under Data analysis, choose Source data to return to regular orders. Choose Group by team to group them again.
Use team totals to understand overall scale and expand individual orders when needed.
This sample groups browser data, separately from server group queries. Regular grouping and pivoting are not enabled together.
Useful terms
- groupBy
- Specifies the column values used to group rows.
- aggFunc: sum
- An aggregation that adds all numeric values in a group.
Using this feature in your product requires the Pro runtime and a valid license.
API reference
#Key properties
| Attribute / Property | Type / Default | Description |
|---|---|---|
PRO groupBy | string | string[]Default: undefined | group rows by this column. Rows fold into expandable groups rendered as group rows with a member count; the group stage runs after filter/sort and before pagination (pages count display rows, group rows included). Unknown fields are ignored with a warning. |
Other properties1
| Attribute / Property | Type / Default | Description |
|---|---|---|
PRO groupPanel | booleanDefault: false | show the row-group panel: a drop zone above the header. Drag a column header into it to group by that column (sets `groupBy`); the panel shows a chip for the grouped column, whose × clears the grouping. |
Events2
| Events | Detail type | Description |
|---|---|---|
PRO | { key: string | null; expanded: boolean } | fires when a row group expands or collapses (`key: null` = blank bucket). |
PRO | { groupBy: string | null } | fires when the row-group column changes (via the group panel). |
Methods8
| Method / Arguments | Return type | Description |
|---|---|---|
PRO name: string, fn: (values: unknown[], rows: readonly unknown[]) => unknown | Promise<void> | register a named custom aggregation for `ColumnDef.aggFunc`. Registered names SHADOW built-ins (AG parity); re-registering a name replaces it. Invalid input warns and no-ops. |
PRO name: string | Promise<void> | remove a registered aggregation (built-ins are unaffected). |
PRO | Promise<string[]> | registered custom aggregation names (registration order). |
PRO key: string | null, expanded: boolean | Promise<void> | expand/collapse one row group. No-ops when the state already matches, grouping is inactive, or the key names no current group (arc review 222-226: unknown keys used to plant phantom collapse state + emit toggles for non-groups). Single-level: `key: null` = the blank bucket. Multi-level : `key` is a node's framed compound key (a `string`), validated against every node's key. |
PRO | Promise<void> | expand every row group. Emits one `rowGroupToggled` per group that actually changes (AG fires rowGroupOpened per node on expand/collapse-all too — arc review 222-226). Multi-level keys are framed strings; single-level blank folds back to `null` in the event. |
PRO | Promise<void> | collapse every row group (computed from the current data). |
PRO index: number | Promise<SyGridDisplayRowInfo | null> | the display-row taxonomy for ONE live display row. |
PRO options?: SyGridGroupCheckStatesOptions | Promise<SyGridGroupCheckStatesReport> | the group checkbox tri-state over the live hierarchy and the live selection. |
ColumnDef1
| ColumnDef | Type / Required | Description |
|---|---|---|
PRO | 'sum' | 'avg' | 'min' | 'max' | 'count' | stringOptional | aggregate this column over each row group (`group-by` active): the value renders in the group footer row. Built-ins: `'sum' | 'avg' | 'min' | 'max' | 'count'`; any other name resolves through `registerAggFunc` (registered names may shadow built-ins — AG `aggFuncs` parity), unknown names warn once and skip the column. Names only (no inline functions) — the declarative surface stays serialisable; functions live in the instance registry. |
Explore each feature
Learn when to use each feature and how to configure it. Each guide identifies live examples and features you connect in your app.