Skip to main content

SVAR React Filter overview

SVAR React Filter library is designed for building intuitive and flexible filtering systems in data-driven applications.
The package contains 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.

License: MIT

When to use each component?​

SVAR React Filter library provides three 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

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.

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
  • Compact filter bar mode
  • Localization
  • Light and dark themes

Data handling​

  • Dynamic loading of filter options
  • Ready-made Go backend to transform output into SQL queries

Next steps​