FilterBar

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

// filtering turned on but no initial filter
const grid = new Grid({
  features: {
    filterBar : true
  }
});

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

Enabling filtering for a column

The individual filterability of columns is defined by a filterable property on the column which defaults to true. If false, that column is not filterable. Note: If you have multiple columns configured with the same field value, assign an id to the columns to ensure filters work correctly.

The property value may also be a custom filter function.

The property value may also be an object which may contain the following two properties:

• filterFn : Function A custom filtering function
• filterField : Object A config object for the filter value input field. See TextField or the other field widgets for reference.

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

  columns: [
     {
       field      : 'age',
       text       : 'Age',
       type       : 'number',
       // Custom filtering function that checks "greater than"
       filterable : ({ record, value }) => record.age > value
     },
     {
       field : 'name',
       // Filterable may specify a filterFn and a config for the filtering input field
       filterable : {
         filterFn : ({ record, value }) => record.name.toLowerCase().indexOf(value.toLowerCase()) !== -1,
         filterField : {
           emptyText : 'Filter name'
         }
       }
     },
     {
       field : 'city',
       text : 'Visited',
       flex : 1,
       // Filterable with multiselect combo to pick several items to filter
       filterable : {
         filterField : {
           type        : 'combo',
           multiSelect : true,
           items       : ['Barcelona', 'Montreal', 'Stockholm']
         }
       }
     }
  ]
});

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

const grid = new Grid({
   features : {
       filterBar : {
           prioritizeColumns : 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
       }
   ]
});

// Will be used when filtering programmatically or using the UI
grid.store.filter({
    property : 'age',
    value    : 41
});

Filtering using a multiselect combo

To filter the grid by choosing values which should match with the store data, use a Combo, and configure your grid like so:

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

   columns : [
       {
           id         : 'name',
           field      : 'name',
           text       : 'Name',
           filterable : {
               filterField : {
                   type         : 'combo',
                   multiSelect  : true,
                   valueField   : 'name',
                   displayField : 'name'
               }
           }
       }
   ]
});

You can also filter the Combo values, for example to filter out empty values. Example:

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

   columns : [
       {
           text       : 'Airline',
           field      : 'airline',
           flex       : 1,
           filterable : {
               filterField : {
                   type         : 'combo',
                   multiSelect  : true,
                   valueField   : 'airline',
                   displayField : 'airline',
                   store        : {
                       filters : {
                           // Filter out empty values
                           filterBy : record => Boolean(record.airline)
                       }
                   }
               }
           }
       }
   ]
});

Remote filtering

The FilterBar works with remote filtering, either by the use of an AjaxStore with a configured filterParamName, or a regular Store with remoteFilter activated. Please note that filterBy function is not supported when remote filtering.

This feature is disabled by default.