Row Groups

Row Grouping - Filtering

Summary

  • Row Grouped Columns can be filtered like any other Column
  • When there are multiple Row-Grouped Columns, AdapTable provides a Tree-based structure

Row Grouped Columns can be filtered like any other column.

Note

  • If a Column being Row-Grouped is already filtered, then the filter will apply to the Row Group
  • Only the values that currently appear in the column being grouped, will display in the Row Group filter

AdapTable's Row Grouped column filter behaviour differs based on the value of the Layout's RowGroupDisplayType property which can be:

  • single- all Row Group Columns appear in one column
  • multi - each Row Grouped Column appears in its own Column

RowGroupDisplayType: Single

When the RowGroupDisplayType is single, AG Grid will display one Column for all Row Grouped Columns.

AdapTable will automatically change the default Predicate to the In Filter.

Caution

Make sure to set floatingFilter to true in AG Grid GridOptions

The look and feel of the In Filter values differs depending on how many Columns are being Row Grouped:

  • one Column only - AdapTable will simply display a list of all distinct values in the Row Grouped Column
  • 2 (or more) Columns - AdapTable will show the grouped columns as an expandable Tree structure (with a button to expand / collapse all "leafs" in the tree)
Row Grouping: Filtering Single RowGroupDisplayType
Fork
  • In this example we have provided 2 Layouts with RowGroupDisplayType set to single:
    • DisplayType Single 1 Row Group has just one Row Group (Language Column) and so values are displayed in a list
    • DisplayType Single 2 Row Groups has 2 Row Groups (Language and License Columns) and so values are displayed in a tree structure

Pre-existing Column Filters

If there are pre-existing Column Filters on a Column which is being Row Grouped, these will, of course, affect which rows are displayed in the Row Grouped Column.

For instance, if the Column Filter means that just 2 rows pass as true, then only those 2 rows appear in the Row Grouped Column.

However, the Filter list for the Row Grouped Column will still display all distinct values (either as a list or Tree).

Note

  • This is because the Filter for the Row Grouped Column (in RowGroupDisplayType: single) is stored separately
  • It is not stored using the Row-Grouped Column's Id, but with a "special" columnId of ag-Grid-AutoColumn
Row Grouping: Existing Filters
Fork
  • In this example we have provided 2 Column Filters - on the Language and License Columns, and we have also Row-Grouped on those 2 columns
  • As a result we only see 12 rows in the Grid (insted of 25) and no Row Group for "TypeScript"
  • However, when we open the In Filter dropdown for the Row Grouped Column we see all the distinct values (in a Tree structure), allowing us to create an additional Column Filter if we wish

Setting Grouped Column Filter

As noted above, when using RowGroupDisplayType of single, the Column Filter for the Row Grouped Column is stored separately to those of the columns which are being Row-Grouped.

Note

It is stored using the special columnId of ag-Grid-AutoColumn (which is created dynamically by AG Grid).

This allows you to create a Column Filter just for the Row Grouped Column, irrespective of any Filters applied to the Columns being Row Grouped.

The Column Filter uses the PredicateId of In and the values are stored as an array of arrays, e.g.

ColumnFilters: [{
  ColumnId: 'ag-Grid-AutoColumn',
  Predicates: [{
    PredicateId: 'In',
    Inputs: [['JavaScript'], ['HTML', 'Other']]
  }]
}]
Row Grouping: Setting Row Grouped Column Filter
Fork
  • In this example we explicitly set a Column Filter on the Row Grouped Column (with PredicateId In) with 2 inputs:
    • 'JavaScript' - so that the leaf of "JavaScript" and all sub-leaves and nodes are selected
    • 'HTML', 'Other' - so that only the combination of HTML and Other is selected
  • We have also set a larger Column Size for the Row Grouped Column to make it easier to see which items have been Filtered
Try It Out
  • Open the Column Filter for the Row Grouped Column and note how the 2 items have been selected

Filtering the AG Grid Field

AG Grid has a neat option that allows developers to set which Column's values will appear in the leaf rows of the Row Grouped Column.

Note

This is done by settting the field property in the autoGroupColumnDef section in Grid Options

When this property is set, AdapTable will also apply the Tree List structure, allowing users easily to select from both the Column(s) being Row Grouped and the Column that is set as the field.

Hint

  • It is also possible to set the Filter when Field is set
  • This is done using the same array of arrays as when you have mutliple Row Grouped Columns
Row Grouping: Filtering with Field
Fork
  • In this example we have set the field property in autoGroupColumnDef to be the Name column
  • As a result, AG Grid displays the Name Column's values when you open a Row Group
  • AdapTable follows suit for the Row Grouped Column's Column Filter, allowing you to see the same structure (and to select values to filter from both Columns)

RowGroupDisplayType: Multi

When the RowGroupDisplayType is multi, AG Grid will display each Row Grouped Column as a separate Column.

Unlike with single Display Type, AdapTable does very little as far as Filtering is concerned.

Column Filters are created, and persisted, in exactly the same way for "normal" and Row-Grouped Columns.

Row Grouping: Filtering Multi RowGroupDisplayType
Fork
  • In this example we have provided a Layout with RowGroupDisplayType set to multi
  • We have Row Grouped on the Language and License Columns, but each appears as its own Column
  • We have also created Column Filters on those 2 Columns which are evaluated, and displayed, identically irrespective of whether the Column is Row Grouped
PreviousFormatting and StylingNextSorting