Angular Data GridRow Grouping - Complex ObjectsEnterprise

This section covers how to group rows when the row data contains complex objects.

Creating group keys from complex objects

When grouping by columns that contain complex objects in the supplied row data, the values will be converted to "[object object]" by default. This will not produce the desired grouping results.

One way to get around this is to add a toString() method to the complex objects, however this may not be possible if you are working with JSON data.

A more flexible solution is to use the colDef.keyCreator(params) callback function to return a meaningful key for the supplied object, as shown in the following code snippets:

`keyCreator`

Function

Function to return a string key for a value. This string is used for grouping, Set filtering, and searching within cell editor dropdowns. When filtering and searching the string is exposed to the user, so make sure to return a human-readable value.

keyCreator = (
    params: KeyCreatorParams<TData>
) => string;

interface KeyCreatorParams<TData = any, TValue = any> {
  // Value for the cell. 
  value: TValue;
  // Row node for the given row 
  node: IRowNode<TData> | null;
  // Data associated with the node 
  data: TData;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

// row item has complex object for country
rowItem = {
    athlete: 'Michael Phelps',
    country: {
      name: 'United States',
      code: 'US'
    },
    ...
}

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */>
</ag-grid-angular>

this.columnDefs = [
  // the column definition for country uses a keyCreator
  {
      field: "country",
      keyCreator: params => params.value.name
  }
];

Note in the snippet above that the colDef.keyCreator(params) returns the country name to be used as the group key from country complex object supplied in the row data.

The example below shows grouping on the country column that contains complex object values:

Example: Grouping Complex Objects with Keys

Next Up

Continue to the next section to learn about Unbalanced Groups.