SVAR Logo
Contact
SVAR Blog Svelte, Filter

SVAR Svelte Filter Released – Intuitive Query Builder

 

Olga Tashlikovich

Jun 10 · 3 min read

SVAR Svelte Filter Released – Intuitive Query Builder

Svelte Filter is Out!

We’re happy to announce the release of SVAR Svelte Filter, a set of Svelte components that help you add an advanced filtering UI and logic to your Svelte project. SVAR Filter provides an intuitive interface for building complex queries with AND/OR groups and nested rules.

If you’re building a data-oriented Svelte app, it is important to give your users a way to extract necessary information out of the large dataset. That’s where a good filtering UI comes in, and SVAR Svelte Filter helps you add one without building it from scratch.

SVAR Svelte Filter - Query Builder

What’s Inside the SVAR Filter Package

SVAR Svelte Filter library includes three modular widgets that provide Filter’s functionality:

FilterBuilder

This is a core component of the Filter package. It provides a clean, user-friendly UI for building filter queries across one or multiple fields. FilterBuilder supports grouping rules, adding nested filters and combining them using AND / OR logic. Ideal for managing complex filtering scenarios in an easy visual way.

Svelte Filter Builder Component

FilterEditor

A part of the FilterBuilder component that can be used standalone. You can use it to build a rule for a single field. This is the example of how it may look like:

Svelte Filter Editor

FilterBar

This is a nice addition to the above widgets that can be used to create the same filtering rules but present them as a simple input and select controls. Just like FilterBuilder widget, FilterBar supports multi-field filtering and AND / OR logic, but with a more compact, form-style layout, which is useful when space is limited or you want a minimal interface.

Svelte Filter Bar

Key Features of SVAR Svelte Filter

SVAR Svelte Filter has everything you need to add advanced filtering feature to your Svelte app:

  • Advanced filtering rules: build complex queries with multiple fields, group filter fields, add nested groups and combine them with AND / OR logic.
  • Different data types: filter text, numeric or date values. Dates and numbers can be displayed in custom formats for better user experience.
  • Various conditions: a wide range of operators can be used for each data type (e.g. equals, contains, greater than, begins with, etc.).
  • Vertical or horizontal layout: filtering rules can be displayed vertically or horizontally.
  • Simple filter bar: simplified horizontal view with some restrictions: each field can be used once, and all rules are combined with AND logic.
  • Dynamic loading: filter options can be loaded dynamically on demand when a new filter is created.
  • Localization: easily set up text labels and date formats based on user locale.
  • Intuitive API: Configure each filter type in detail. Easily set or retrieve values and track changes with a straightforward API.
  • Structured JSON output: the Filter generates structured JSON that developers can convert into SQL or other query formats as needed.
  • Light and dark themes: choose the look of the filter to suit your design needs..

Get Started

SVAR Svelte Filter is open source and available under the MIT license. You can install it via npm:

npm install wx-svelte-filter

To start working with the Filter components, follow these links:

If you find SVAR Filter useful, we’d really appreciate your stars on GitHub! You’re welcome to open issues there or post questions in our community forum.

sveltefilter