Skip to content

Grid - Row Filter

Most grids in application have row filter in the second row (below column names).

How row filter looks like (example):

ui-ux-pattern-grid-row-filter-link

Row filter is composed of two parts - operator (left part) and value(s) (right part).

The example below shows the row filter for a column data type of text.

ui-ux-pattern-grid-row-filter-operator-choose-link

Examples of available operators for data types date, datetime and number and value choosers (date, datetime):

OperatorsDate value pickerDatetime value picker
ui-ux-pattern-grid-row-filter-operators-datetime-linkui-ux-pattern-grid-row-filter-value-chooser-date-linkui-ux-pattern-grid-row-filter-value-chooser-datetime-link

Example of selected date and datetime row filter in grid (both with “Less than” operator):

ui-ux-pattern-grid-row-filter-date-datetime-values-chosen-link

When “Between” operator is chosen (for date, datetime and number data types) - then start and end values should be defined.
Example for selecting start and end values for date type date and how it looks when chosen:

Before selectionWhen selected
ui-ux-pattern-grid-row-filter-value-chooser-date-between-linkui-ux-pattern-grid-row-filter-value-chooser-date-between-chosen-link