Add support for simple filtering

[marcushellberg]

In order to make it easier to understand how to filter a grid, I would like to see a filter(column, string) method in the API. With an array datasource, it would filter the array and with a function data source it would pass the filter parameter to the function.

[Saulis]

As discussed with @JouniK and @platosha here's a proposal to start working with:

As a first step, add filter property similar to sortOrder to the Column API. Filters could be changed by grid.columns[0].filter = 'foo'; or similar. The could be a helper function added later to insert multiple filters at a time.

When filters have been defined, the params object in the data fetch request would have a filter property. The structure of the object could be either [ { name: 'firstName', filter: 'foo' }, { name: 'lastName', filter: 'bar' }] or for example {firstName: 'foo', lastName: 'bar'}. That would need to be tested out - the main thing is that it should closely resemble the sortOrder object probably.

There would be a public function which would define the filtering method, by default it would a contains type of filtering and that method would be internally used when filtering arrays. It could also be accessed from the function data source and it could be overridden by the user if needed.

When using array data sources, changing the filters would always trigger filtering immediately and fire a filter-changed event. With function data sources, function would be fired, but no data requests would be fired until the user explicitly refreshes the items.

Afterwards, we could design and apply a way how to also add a header row with input fields.

[jouni]

I would not add a property to the column objects, as we don’t have the sortDirection property there either. I see that it could be there, but I would still start with just one addition filter property on the main grid object:

grid.filter = [
  { 
    column: index/name,
    filter: string/object
  },
  ...
];

The nested filter could be a more complex object for stuff like "greater than" etc.

[kito99]

+1 for having this natively.

[jouni]

2.0 will have the <vaadin-grid-filter> element that you can use to easily add filters for the columns. See online example.

We won’t fix this for 1.x.