🔍 SVAR React Filter: Open-Source Query Builder for React

If you’re building a React app that works with large datasets, giving users an intuitive way to filter and find what they need is essential. Think of admin dashboards, CRMs, project management tools, or analytics panels where users have to analyze and interact with large volumes of data. 

To simplify this task, we’ve created SVAR React Filter, a query builder for React that provides everything you need out of the box: a clear and intuitive filtering UI, AND/OR logic, nested filter groups, support for multiple data types, and a wide range of conditions.

What’s Included

SVAR React Filter library includes three components:

• FilterBuilder - an advanced logic builder for complex queries
• FilterEditor - a standalone filter for a single field
• FilterBar - a simple toolbar with inputs empowered by query-building logic

SVAR React Filter can be easily integrated into React projects, as it:

• Works with React 18 and 19
• Supports TypeScript
• Produces and consumes JSON format
• Is MIT-licensed – check out the repository on GitHub 🛠️

To try SVAR React Filter in action, see this demo with SVAR DataGrid.

Why SVAR React Filter? 

SVAR React Filter comes with ready-to-use advanced logic of a query builder combined with a clean, modern user interface.

Filtering Logic

• Build complex queries with multiple fields, grouped filters, and nested conditions
• Combine rules using AND/OR logic for precise data filtering
• Filter text, numbers, and dates with type-specific operations (equals, contains, greater than, begins with, etc.)

User Experience

• Display filters vertically or horizontally to fit your layout
• Load filter options dynamically as users create new filters
• Localize text labels and date formats based on user locale
• Choose between light and dark themes

Developer Experience

• Get structured JSON output ready for backend processing
• Transform filter queries to SQL using the included Go backend integration
• Configure each filter type with a straightforward API

Get Started

You can install SVAR React Filter via npm:

npm install @svar-ui/react-filter

Here’s a quick example to get you started with FilterBuilder using the light Willow theme:

import { FilterBuilder, Willow } from "@svar-ui/react-filter";
import "@svar-ui/react-filter/all.css";

const fields = [
{ id: "first_name", label: "First Name", type: "text" },
{ id: "age", label: "Age", type: "number" },
{ id: "start", label: "Start Date", type: "date", format: "%y-%m-%d" }
];

const options = {
first_name: ["Alex", "Adam", "John", "Jane"],
age: [17, 21, 35, 42],
start: [new Date(2025, 4, 7), new Date(2025, 4, 10)]
};

export default function App() {
return (
<Willow>
<FilterBuilder fields={fields} options={options} />
Willow>
);
}

For detailed instructions, API references, and more examples see:

Wrapping Up

With SVAR React Filter, you can add advanced filtering to your React applications without building it from scratch. Whether you need a compact filter bar for a table or a full-featured query builder for complex dashboards, it provides the right level of flexibility.

Try it in your React project and see how much easier filtering can be. If you like it, a star on GitHub will be much appreciated! 🌟