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

Anatomy
ElementDescription
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

Accordion Do Example
Do
  • 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.
Accordion Dont Example
Don't
  • 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