Skip to main content

Filter user interface overview

FilterBuilder​

FilterBuilder is the core component that consists of the next main UI elements:

  • Filter group container
  • Filter rule rows
  • Context menu for adding and editing groups and rules
  • Filter editor is a standalone component described below

FilterBuilder

The component mode can be set to one of three available:

  • simple – vertical layout with AND logic only
  • line – horizontal layout for compact use
  • list – (default) vertical layout with full rule nesting support

Filter group container​

It allows visual grouping of filters using logical operators: AND, OR.

Each group can contain:

  • Filter rules (single conditions)
  • Nested filter groups (to allow complex logic)

Filter rule rows​

Each rule allows users to:

  • Select a field (e.g. name, age, status)
  • Choose a condition (e.g. equals, greater than, contains)
  • Input a value (or pick from dropdown if options are provided)

Context menu​

Context menu allows the user to:

  • Edit a rule
  • Add a filter below the current rule
  • Add a group (nested group)
  • Delete a rule or group

FilterMenu

FilterEditor​

It's a standalone component used inside the FilterBuilder.

FilterEditor

To add a filter, a user should:

  1. In the top dropdown, select a filed to filter by
  2. In the next dropdown, select the filtering operation ("equal", "contains", etc.)
  3. Input a value or select it from the provided options list
  4. Click Apply

FilterBar​

The component provides next elements for quick filtering:

  • Text input (for text, number fields)
  • Dropdown (for select, or dynamic field selectors)
  • Optional label shown before input

To filter data, a user should input the value into the input or/and select an option from the dropdown. After the delay, the component outputs the filtered data.

FilterBar