Filter

Feature that allows filtering of the grid by settings filters on columns. The actual filtering is done by the store. For info on programmatically handling filters, see StoreFilter.

// Filtering turned on but no default filter
const grid = new Grid({
  features : {
    filter : true
  }
});

// Using default filter
const grid = new Grid({
  features : {
    filter : { property : 'city', value : 'Gavle' }
  }
});

A column can supply a custom filtering function as its filterable config. When filtering by that column using the UI that function will be used to determine which records to include. See Column#filterable for more information.

// Custom filtering function for a column
const grid = new Grid({
   features : {
       filter : true
   },

   columns: [
       {
         field      : 'age',
         text       : 'Age',
         type       : 'number',
         // Custom filtering function that checks "greater than" no matter
         // which field user filled in :)
         filterable : ({ record, value, operator }) => record.age > value
       }
   ]
});

If this feature is configured with prioritizeColumns : true, those functions will also be used when filtering programmatically:

const grid = new Grid({
   features : {
       filter : {
           prioritizeColumns : true
       }
   },

   columns: [
       {
         field      : 'age',
         text       : 'Age',
         type       : 'number',
         filterable : ({ record, value, operator }) => record.age > value
       }
   ]
});

// Because of the prioritizeColumns config above, any custom filterable function
// on a column will be used when programmatically filtering by that columns field
grid.store.filter({
    property : 'age',
    value    : 41
});

This feature is disabled by default.

Keyboard shortcuts

This feature has the following default keyboard shortcuts:

For more information on how to customize keyboard shortcuts, please see our guide.

Menu items

The following items are populated under the Filter submenu (in the cell and column header context menus) when the Filter feature is active.

Legacy UI mode

To use the more limited legacy UI instead, configure legacyMode to true.

You can supply a field config to use for the filtering field displayed for string type columns (legacy mode only):

// For string-type columns you can also replace the filter UI with a custom field:
columns: [
    {
        field : 'city',
        // Filtering for a value out of a list of values
        filterable: {
            filterField : {
                type     : 'combo',
                operator : 'isIncludedIn',
                items    : [
                    'Paris',
                    'Dubai',
                    'Montreal',
                    'London',
                    'New York'
                ]
            }
        }
    }
]

You can also change the default fields, for example this will use DateTimeField in filter popup (legacy mode only):

columns : [
    {
        type       : 'date',
        field      : 'start',
        filterable : {
            filterField : {
                type : 'datetime'
            }
        }
    }
]