Skip to main content

SVAR Svelte Filter widgets overview

The SVAR Svelte Filter widgets are designed for building intuitive and flexible filtering systems in data-driven applications. The package encapsulates three main components: FilterBuilder, FilterEditor, and FilterBar. Each component is tailored to different levels of filtering complexity. Together, they provide a comprehensive filtering toolkit that scales from simple inputs to advanced multi-field query builders.

When to use each component?​

SVAR provides three main filter components:

  • FilterBuilder – an advanced logic builder for complex queries
  • FilterEditor – a standalone filter from the FilterBuilder
  • FilterBar – a simple toolbar with inputs empowered by query building logic

FilterBuilder is the core component. It is a full-featured visual query builder for constructing complex logic trees (AND/OR groups, nested rules) ideal for advanced user interfaces. If you need complex logic building, for example, for admin dashboards with advanced query building or apps that require nested AND/OR conditions and full control over nested filter rules, FilterBuilder is the best.

The FilterEditor component is a standalone filter from FilterBuilder. It is designed for editing a filtering rule for a single field. It suits best for interfaces that already have own controls for combining filters.

The FilterBar component is a compact, inline search tool designed for quick filtering, often used above data tables or dashboards. Use it if you want a light-weight interface but powerful filtering abilities behind it.

Main UI elements​

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