Sorting

<vaadin-grid-sorter> can be used to define sorting for a column. The users in the example are sorted by last name initially.

NOTE: You must explicitly import the vaadin-grid-sorter.html in order to use <vaadin-grid-sorter>.

Sorting with Data Provider

When the data is fetched from a data provider, the responsibility of providing the correctly ordered data is on the data provider itself. The data provider is ascked for fresh sorted data whenever the sorting order is changed on any <vaadin-grid-sorter>.

The effective sortOrders array will be included as one of the data provider call options.

Hint: When using a data provider, path on the <vaadin-grid-sorter> element can be set to any string, instead of a property on the item object.

Filtering

<vaadin-grid-filter> can be used to define filtering for a column.

NOTE: You must explicitly import the vaadin-grid-filter.html in order to use <vaadin-grid-filter>.

Filtering with Data Provider

While filtering works with array data providers out-of-the-box, custom data providers need to provide pre-filtered data to the vaadin-grid.

Whenever the value of a vaadin-grid-filter changes, for example, when a user types something, the dataProvider is asked for fresh data with the filters included as one of the request parameters.

Hint: When using a data provider, path on the filter element can be customized to be any string, instead of a property on the item object.