SVAR Logo
Contact
SVAR Blog React, Filter

SVAR React Filter: Flexible & Intuitive Query Builder

 

Olga Tashlikovich

Oct 6 · 3 min read

SVAR React Filter: Flexible & Intuitive Query Builder

Introducing SVAR React Filter

We continue releasing React versions of available SVAR components, and this time we’re happy to introduce SVAR React Filter! It is an open-source library of three React components that help you add filtering features to your data-driven web apps, from simple single-field filters to complex multi-level queries.

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. SVAR React Filter provides everything you need: AND/OR logic, nested filter groups, and a clean UI that makes complex queries feel simple.

SVAR React Filter - Query Builder

A demo worth a thousand words: see how SVAR React Filter is used with DataGrid.

You can find the SVAR React Filter repository on on GitHub.

What You Can Do with It

SVAR React Filter gives you powerful filtering capabilities out of the box:

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
SVAR React Filter - Light and Dark UI

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

What’s Included

SVAR React Filter library includes these three components:

FilterBuilder
The core component. A full-featured visual query builder for constructing complex logic trees with AND/OR groups and nested rules. Perfect for admin dashboards and apps requiring advanced filtering capabilities.

FilterEditor
A standalone single-field filter extracted from FilterBuilder. Best for interfaces that already have their own controls for combining filters.

FilterBar
A compact, inline filtering tool with the same powerful logic as FilterBuilder, but presented as simple input and select controls. Ideal when space is limited or you want a minimal, form-style interface above data tables, for example.

Get Started

SVAR React Filter is available under the MIT license. You can install it via npm:

npm install @svar-ui/react-filter

Here’s a quick example to get you started with FilterBuilder:

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:

Wrapping Up

If you’re working with large datasets and need an intuitive way for users to filter through them, SVAR React Filter provides a flexible, ready-to-use solution. Try it out, and if you need help, feel free to contact us on the community forum or on GitHub!

reactfilter