Vue Data Grid

Row Grouping - Complex Objects

vue logo
Enterprise

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: