Input Filter

Description

Input filter is the default filter when enabling filters.

Demo

Demo Page / Demo Component

UI Usage

All column types support the following operators: (>, >=, <, <=, <>, !=, =, ==, *) Example:

• Number type
  • >100 => bigger than 100
  • <>100 => not include number 100
• Date types
  • >=2001-01-01 => bigger or equal than date 2001-01-01
  • <02/28/17 => smaller than date 02/28/17
• String type
  • <>John (not include the sub-string John)
  • John* => starts with the sub-string John
  • *Doe => ends with the sub-string Doe

Note

For filters to work properly (default is string), make sure to provide a FieldType (type is against the dataset, not the Formatter), for example on a Date Filters, we can set the FieldType of dateUtc/date (from dataset) can use an extra option of filterSearchType to let user filter more easily. For example, with a column having a "UTC Date" coming from the dataset but has a formatter: Formatters.dateUs, you can type a date in US format >02/28/2017, also when dealing with UTC you have to take the time difference in consideration.

How to use Input Filter

Simply set the flag filterable to True and and enable the filters in the Grid Options. Here is an example with a full column definition:

// define you columns, in this demo Effort Driven will use a Select Filter
this.columnDefinitions = [      
  { id: 'title', name: 'Title', field: 'title' },
  { id: 'description', name: 'Description', field: 'description', filterable: true }
];

// you also need to enable the filters in the Grid Options
this.gridOptions = {
   enableFiltering: true
};

Filtering with Localization (i18n)

When using a regular grid with a JSON dataset (that is without using Backend Service API), the filter might not working correctly on cell values that are translated (because it will try to filter against the translation key instead of the actual formatted value). So to bypass this problem, a new extra params was created to resolve this, you need to set useFormatterOuputToFilter to True and the filter will, has the name suggest, use the output of the Formatter to filter against. Example:

// define you columns, in this demo Effort Driven will use a Select Filter
this.columnDefinitions = [      
  { id: 'title', name: 'Title', field: 'id', 
    headerKey: 'TITLE', 
    formatter: this.taskTranslateFormatter,  // <-- this could be a custom Formatter or the built-in translateFormatter
    filterable: true, 
    params: { useFormatterOuputToFilter: true } // <-- set this flag to True
  },
  { id: 'description', name: 'Description', field: 'description', filterable: true }
];

// you also need to enable the filters in the Grid Options
this.gridOptions = {
   enableFiltering: true
};

// using a custom translate Formatter OR translateFormatter
taskTranslateFormatter: Formatter = (row, cell, value, columnDef, dataContext) => {
  return this.i18n.tr('TASK_X', { x: value });
}

How to Filter Complex Objects?

You can filter complex objects using the dot (.) notation inside the field property defined in your Columns Definition.

For example, let say that we have this dataset

const dataset = [
 { item: 'HP Desktop', buyer: { id: 1234, address: { street: '123 belleville', zip: 123456 }},
 { item: 'Lenovo Mouse', buyer: { id: 456, address: { street: '456 hollywood blvd', zip: 789123 }}
];

We can now filter the zip code from the buyer's address using this filter:

this.columnDefinitions = [
  {
    // the zip is a property of a complex object which is under the "buyer" property
    // it will use the "field" property to explode (from "." notation) and find the child value
    id: 'zip', name: 'ZIP', field: 'buyer.address.zip', filterable: true
   // id: 'street',  ...
];

Query against another field property

What if your grid is displaying a certain field but you wish to query against another field? Well you could do that with the 1 of following 3 options:

• queryField (query on a specific field for both the Filter and Sort)
• queryFieldFilter (query on a specific field for only the Filter)
• queryFieldSorter (query on a specific field for only the Sort)

Example

this.columnDefinitions = [
  {
    id: 'salesRepName', 
    field: 'salesRepName',          // display in Grid the sales rep name with "field"
    queryFieldFilter: 'salesRepId', // but query against a different field for our multi-select to work
    filterable: true
  }
];