Filter Rows
Filter rows are horizontal containers for filters controlling a large list or table.
Overview
Place filter rows above a data table or list to be filtered. Use selects, date-pickers, multi-selects, or inputs as filters in the filter row component. In order to keep this component flexible, a formal API is not provided for data handling. Developers should handle this directly using Vue.
Design and Layout
The component provides a basic layout, arranging filters and buttons horizontally above 992px
viewport width. Below that width, filters and actions stack.
Anatomy

Element | Description |
---|---|
1. Filter Row Container | Holds all components of the filter row |
2. Default Slot | Slot for filters, such as selects, multi-selects, inputs, and date-pickers. |
3. Actions Slot | Slot for buttons, such as “Apply” and “Clear All” |
Dos and Don’ts

- Do use filter rows for data tables with large amounts of data that are frequently filtered.
- Do use 1-4 filters and provide both “Apply” and “Clear All” buttons.

- Don't use the filter component in a filter row. The height of the filter component grows to hug selected options and will break the layout of the filter row.
Installation
Slots
No records available |