Configuring Pagination and Filtering
You can further customize how Tables are displayed by using special attributes —all of which are documented in the
VDL 4.6 Reference.
Pagination can be invoked by:
- selecting the table in the View Designer and editing the Pagination attribute.
- setting the attribute page-mode="paged" within a <vdl-table> element.
You can add a filter to a table by:
- selecting the table in the View Designer and editing the Search attribute.
- setting show-filter="true" within a <vdl-table> element.
A related attribute adds a filter input at the top of each column, allowing your users to filter rows based on matches in each column.
You can add a column filter to a table by:
- selecting the table in the View Designer and editing the Column filters attribute.
- setting column-filter="true" within a <vdl-table> element.
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 in the code editor by adding the attribute filter-by-formatted="true" to a vdl-table or vdl-table-column.