Filtering

Quick start

From version 2.0 revo-grid supports Filtering Plugin.
To enable Filtering just setup property filter to true.
By default there are sevaral types available:

• string
  • notEmpty
  • empty
  • eq
  • notEq
  • begins
  • contains
  • notContains
• number
  • notEmpty
  • empty
  • eqN
  • neqN
  • gt
  • gte
  • lt
  • lte

With their names accordingly:

 const filterNames = { none: 'None', empty: 'Not set', notEmpty: 'Set', eq: 'Equal', notEq: 'Not equal', begins: 'Begins with', contains: 'Contains', notContains: 'Does not contain', eqN: '=', neqN: '!=', gt: '>', gte: '>=', lt: '<', lte: '<=', }; 

// tsx const columns = [{ prop: 'name' }]; const source = [{ name: 'Steve' }, { name: 'John' }]; return '<revo-grid rowClass="myRowClass" source={source} columns={columns} filter={true}/>'; 

Filter per column

If you wish to disable filter for selected column all you have to do setup filter on your column to false.

const columns = [{ prop: 'name', filter: false }]; // filter icon will be disabled for column with property `name` const source = [{ name: 'Steve' }]; return '<revo-grid rowClass="myRowClass" source={source} columns={columns} filter={true}/>'; 

Alternatively you can setup filter type filter: 'number':

// tsx const columns = [{ prop: 'name', filter: 'number' }]; // filter type 'number' (string by default) const source = [{ name: 'Steve' }]; return '<revo-grid rowClass="myRowClass" source={source} columns={columns} filter={true}/>'; 

Advance usage

If you consider more advanced filter usage you have to look into <revo-grid/> filter property. filter: boolean|ColumnFilterConfig - can be boolean or ColumnFilterConfig type.

type ColumnFilterConfig = { // preserved filters collection collection?: FilterCollection; // names of filters to be included include = ['eq', 'contains'] include?: string[]; // you can create your own filters here customFilters?: Record<string, CustomFilter>; }; 

Advance filter usage:

const columns = [{ prop: 'name', filter: 'myFilterType' }]; const source = [{ name: 'Steve' }]; // @extraValue available if filterFunc.extra set to input const filterFunc = (cellValue, extraValue) => { if (!cellValue) { return false; } if (typeof cellValue !== 'string') { cellValue = JSON.stringify(cellValue); } return cellValue === 'A'; }; // if you want extra input field for @extraValue filterFunc.extra = 'input'; const filterConfig = { include: ['newEqual'], customFilters: { 'newEqual': { columnFilterType: 'myFilterType', // column filter type id name: 'Equal to A', func: filterFunc } } }; return '<revo-grid rowClass="myRowClass" source={source} columns={columns} filter={filterConfig}/>'; 

TIP

ColumnFilterConfig is powerful option for the latest information it's recommended to read filter-plugin (opens new window) file for better understanding what parameters filter accepts.