React Query Builder for Complex Data Filtering

SVAR React Filter is a flexible component that provides a clear interface for filtering data in data-heavy React apps. Use it as a simple filter or enable your users to build complex query conditions.

Get Started

View Demos

Licensed under MIT

SVAR React Filter component — light & dark theme

Also available for:

Flexible React Query Builder Component

SVAR React Filter helps you manage large datasets by building queries with complex conditions, nested filter groups, and AND/OR logic. It supports text, numeric, and date fields with customizable formatting. Simplified filter bar mode is included for clean, streamlined UIs.

Try Query Builder in Action

This demo shows how SVAR React Filter component can be used as a user-friendly query builder for complex data filtering in a data table. This is an integration with SVAR React DataGrid. For the best experience, view this page on a desktop device to enjoy the live demo, as it looks great on larger screens!

Open Fullscreen Demo

Powerful Features of React Query Builder

SVAR Filter supports complex multi-level AND/OR conditions, nested filter groups, and dynamic rule combinations. Build queries that span multiple fields with full control.

You can filter multiple data types: text, numbers, and dates. This React query builder component supports relevant operators for each type, like equals, contains, greater than, less than, starts with, etc.

In this React query builder, filter options can be loaded dynamically based on the context or user input. Ideal for cascading filters (select country → auto-load cities) and large datasets with millions of options.

Depending on your design needs, you can display filters vertically in a side pane or arrange them horizontally. A simplified filter bar view is also available for compact layouts.

You can adapt the query builder interface to suit different languages and cultural preferences. Easily translate filter labels and conditions and localize number and date formats.

Export filter rules as structured JSON optimized for SQL generation. Includes Go backend helper to transform nested conditions into production-ready SQL. Full TypeScript support ensures smooth integration.

React Query Builder for Complex Data Filtering

Flexible React Query Builder Component

Try Query Builder in Action

Powerful Features of React Query Builder

Advanced nested query logic

Support for multiple data types

Dynamic loading of options

Vertical or horizontal view

Localization and globalization

SQL-ready JSON output & TypeScript API

Get Help at Every Step

Documentation

Community Forum

Professional support

Technical support team

Resources

How to start guide

Community forum

GitHub repositories