SVAR React Filter widgets overview
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
- Read getting started guide
- Browse API documentation
- Explore Filter demos with code examples references on GitHub