Skip to main content

SVAR Svelte Filter overview

SVAR Svelte Filter library is designed for building intuitive and flexible filtering systems in data-driven applications.
The package contains four main components: FilterBuilder, FilterEditor, FilterBar, and FilterQuery.
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. The library also offers TypeScript support with built-in type definitions.

License: MIT

When to use each component?​

SVAR Svelte Filter library provides four main 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
  • FilterQuery – a query input for typing structured filter expressions, with optional Natural Language Mode for processing plain-text queries through an AI/NLP endpoint

FilterBuilder​

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.
Use it when you need complex logic building, e.g. for admin dashboards with advanced query building or apps that require nested AND/OR conditions and full control over filter rules.

FilterEditor​

A standalone filter from FilterBuilder. Designed for editing a filtering rule for a single field.
Best for interfaces that already have their own controls for combining filters.

FilterBar​

A compact, inline search tool designed for quick filtering, often used above data tables or dashboards.
Use it if you want a lightweight interface but still need powerful filtering abilities behind it.

FilterQuery​

A query-based filtering component that lets users type structured filter expressions. Best for keyboard-driven workflows where users prefer writing queries instead of configuring filters through UI controls. Supports autocomplete, syntax highlighting, and optional Natural Language Mode for processing plain-text queries through an AI/NLP endpoint.

Key features​

Filtering logic​

  • Multi-field rules
  • Groups of filters
  • Nested filters
  • AND/OR logic
  • Multiple data types: text, number, and date filtering
  • Type-specific operations: equal, not equal, begins with, contains, and more

User interface​

  • Vertical or horizontal layout (FilterBuilder)
  • Compact filter bar mode
  • Localization
  • Light and dark themes

Data handling​

  • Dynamic loading of filter options
  • Ready-made Go backend services (deployable on your side):
    • For transforming the filtered output into SQL queries
    • For FilterQuery Natural Language Mode, which converts free-text queries into structured filtering rules using AI/NLP

Next steps​