Configuring Pagination and Filtering

Pagination can be invoked by setting the attribute page-mode="paged" within a <vdl-table> element. By default, this shows 50 items per page but you can change this via an associated page-size attribute.

You can add a filter to a table by setting show-filter="true" within a <vdl-table> element. A filter provides an end user with an input field at the top of the table which allows them to filter all cells by that value. A related column-filter="true" attribute will add a filter input at the top of each column, allowing your users to filter rows based on matches in each column.

The previous example illustrates how to use pagination and filtering.

When adding the show-filter and column-filter attributes to a table, bear in mind that by default, cells are sorted and filtered by their underling values rather than their displayed values. These differ if a set has a labels array associated with it or if a custom cell renderer has been applied to a column. You can change this filtering mechanism to apply to cells' formatted characteristics instead of their underlying values by adding the attribute filter-by-formatted="true" to a vdl-table or vdl-table-column.