Angular Data GridSet Filter - Filter List

angular logo
Enterprise

This section describes how Filter List values can be managed through custom sorting and formatting. Supplying filter values directly to the Set Filter is also discussed.

Sorting Filter Lists

Values inside a Set Filter will be sorted by default, where the values are converted to a string value and sorted in ascending order according to their UTF-16 codes.

When a different sort order is required, a Comparator can be supplied to the set filter as shown below:

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

this.columnDefs = [
    {
        field: 'age',
        filter: 'agSetColumnFilter',
        filterParams: {
            comparator: (a, b) => {
                const valA = parseInt(a);
                const valB = parseInt(b);
                if (valA === valB) return 0;
                return valA > valB ? 1 : -1;
            }
        }
    }
];

The Comparator used by the Set Filter is only provided the values in the first two parameters, whereas the Comparator for the Column Definition (colDef) is also provided the row data as additional parameters. This is because when sorting rows, row data exists. For example, take 100 rows split across the colour values [white, black]. The column will be sorting 100 rows, however the filter will be only sorting two values.

If you are providing a Comparator that depends on the row data and you are using the Set Filter, be sure to provide the Set Filter with an alternative Comparator that doesn't depend on the row data.

The following example demonstrates sorting Set Filter values using a comparator. Note the following:

  • The Age (no Comparator) filter values are sorted using the default string order: 1, 10, 100...
  • The Age (with Comparator) filter has a custom Comparator supplied in the filterParams that sorts the ages by numeric value: 1, 2, 3...

Formatting Values

This section covers different ways to format the displayed Filter List values in the Set Filter.

Formatting Filter List values will not change the underlying value or Filter Model.

Value Formatter

A Value Formatter is a good choice when the string value displayed in the Filter List needs to be modified, for example adding country codes in parentheses after a country name, as shown below:

const countryValueFormatter = params => {
    const country = params.value;
    return country + ' (' + COUNTRY_CODES[country].toUpperCase() + ')';
};

The following snippet shows how to provide the countryValueFormatter to the Set Filter:

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

this.columnDefs = [
    // column definition using the same value formatter to format cell and filter values
    {
        field: 'country',
        valueFormatter: countryValueFormatter,
        filter: 'agSetColumnFilter',
        filterParams: {
            valueFormatter: countryValueFormatter,
        },
    }
];

In the code above, the same value formatter is supplied to the Column and Filter params, however separate Value Formatters can be used.

The following example shows how Set Filter values are formatted using a Value Formatter. Note the following:

  • No Value Formatter does not have a Value Formatter supplied to the Set Filter. The column is supplied a Value Formatter through colDef.valueFormatter = countryValueFormatter.
  • With Value Formatter has the same Value Formatter supplied to the Column and Set Filter. The Set Filter is supplied the value formatter through filterParams.valueFormatter = countryValueFormatter.
  • Click Print Filter Model with a filter applied and note the logged Filter Model (dev console) has not been modified.

Cell Renderer

A Cell Component is a good choice when the value displayed requires markup. For instance if a country flag image is to be shown alongside country names.

The same Cell Component can used to format the grid cells and filter values, or different components can be supplied to each. Note that the Cell Component will be supplied additional info when used to format cells inside the grid (as grid cells have row details that are not present for values inside a Filter List).

Assuming you have a custom Country Cell Component, the following snippet shows how to provide the countryCellRenderer to the Set Filter:

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

this.columnDefs = [
    // column definition using the same cell renderer to format cell and filter values
    {
        field: 'country',
        cellRenderer: countryCellRenderer,
        filter: 'agSetColumnFilter',
        filterParams: {
            cellRenderer: countryCellRenderer
        }
    }
];

A custom Cell Renderer Component can also be supplied to filterParams.cellRenderer.

The following example shows how Set Filter values are rendered using a Cell Renderer. Note the following:

  • No Cell Renderer does not have a Cell Renderer supplied to the Set Filter. The Column has a Cell Renderer supplied to the Column using colDef.cellRenderer = countryCellRenderer.
  • With Cell Renderer uses the same Cell Renderer to format the cells and filter values. The Set Filter is supplied the Value Formatter using filterParams.cellRenderer = countryCellRenderer.
  • Click Print Filter Model with a filter applied and note the logged filter model (dev console) has not been modified.

Supplying Filter Values

The Set Filter will obtain the filter values from the row data by default. These are retrieved from the data based on the field attribute. This can be overridden by providing a filterValueGetter in the Column Definition. This is similar to using a Value Getter, but is specific to the filter.