Just released

React Filter Component - Query Builder

SVAR React Filter is a flexible component that provides a clear UI 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

Also available for:

Powerful Query Builder for React Applications

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 SVAR React Filter

This demo shows how SVAR React Filter can be integrated
with SVAR React DataGrid to enable complex data filtering. 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

Key Features of SVAR React Filter

SVAR React Filter supports multiple data types and conditions, lets users combine rules with AND/OR logic, create filter groups and nested groups for complex, multi-level queries.

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

Filter options can be loaded based on the context or user input, which helps to optimize performance when working with large datasets or dynamic field definitions.

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 filtering interface to suit different languages and cultural preferences. Easily translate filter labels and conditions and localize number and date formats.

Detailed filter-type settings and a clear API make it easy to set values, retrieve them, and track updates. TypeScript support ensures smooth integration. The Filter outputs structured JSON filters suitable for generating SQL queries.

React Filter Component - Query Builder

Powerful Query Builder for React Applications

Try SVAR React Filter

Key Features of SVAR React Filter

Advanced filtering

Support for multiple data types

Dynamic loading of options

Vertical or horizontal view

Localization and globalization

Developer-friendly API

Get Help at Every Step

Documentation

Community Forum

Professional support

Technical support team

Resources

How to start guide

Community forum

GitHub repositories