The Grid can group rows with equivalent cell values under shared parent rows.
Enabling Row Grouping
Row Grouping is enabled by setting rowGroup to true on one or more Column Definition. Group rows are then introduced for each unique value in that column, containing the rows with that value.
The example above uses the following configuration to group rows by their country and year values:
<ag-grid-vue
:columnDefs="columnDefs"
/* other grid options ... */>
</ag-grid-vue>
this.columnDefs = [
{ field: 'country', rowGroup: true },
{ field: 'sport', rowGroup: true },
// ...other column definitions
];API Reference
Specifies how the results of row grouping should be displayed.
The options are: 'singleColumn': single group column automatically added by the grid. 'multipleColumns': a group column per row group is added automatically. 'groupRows': group rows are automatically added instead of group columns. 'custom': informs the grid that group columns will be provided. |
Allows specifying the group 'auto column' if you are not happy with the default. If grouping, this column definition is included as the first column in the grid. If not grouping, this column is not included. |
Provide the Cell Renderer to use when groupDisplayType = 'groupRows'. |
Customise the parameters provided to the groupRowRenderer component. |
Shows the open group in the group column for non-group rows. |
Set to true to hide parents that are open. When used with multiple columns for showing groups, it can give a more pleasing user experience. |
Enable to display the child row in place of the group row when the group only has a single child. |
Allows default sorting of groups. |
Set to true to prevent the grid from creating a '(Blanks)' group for nodes which do not belong to a group, and display the unbalanced nodes alongside group nodes. |
When true, preserves the current group order when sorting on non-group columns. |
If grouping, set to the number of levels to expand by default, e.g. 0 for none, 1 for first level only, etc. Set to -1 to expand everything. |
(Client-side Row Model only) Allows groups to be open by default. |
Set to true prevent Group Rows from sticking to the top of the grid. |
When to show the 'row group panel' (where you drag rows to group) at the top. |
Set to true to suppress sort indicators and actions from the row group panel. |
If grouping, locks the group settings of a number of columns, e.g. 0 for no group locking. 1 for first group column locked, -1 for all group columns locked. |
By default, dragging a column out of the grid, i.e. to the Row Group Panel, it will be hidden in the grid. This property prevents the column becoming hidden in the grid. Default: false |
Enable to prevent column visibility changing when grouped columns are changed. |
Next Up
Continue to the next section to learn about Grouping Data.