How do I get the filter expression?

Access queryBuilder.value to get the current conditions as an array that can be used for filtering data.

How do I add custom operators?

Define custom operators in the customOperations property for specific field types.

smart-ui

JavaScript

Angular

Vue

React

Getting Started with React QueryBuilder Component

Smart UI React targets React 18+ and current Node LTS for tooling; use TypeScript templates when you want typed props and events.

Demo source (Smart UI repo): react/source/querybuilder/overview/App.jsx

1 Create a Vite + React + TypeScript app

npm create vite@latest my-smart-app -- --template react-ts

```
cd my-smart-app
```
then
```
npm install
```

2 Install Smart UI for React

npm install smart-webcomponents-react

3 Import styles and render the component

Open src/App.tsx (or App.jsx if you chose JavaScript). The snippet below matches Smart UI React demos for this widget:

import 'smart-webcomponents-react/source/styles/smart.default.css';
import './App.css';
import React from "react";
import { QueryBuilder } from 'smart-webcomponents-react/querybuilder';

function App() {
    // componentDidMount equivalent, if needed in the future
    // React.useEffect(() => {}, []);

    return (
        <div>
            <div className="demo-description">
                The Query Builder component allows you to build complex quieries through
                UI. The output of the component is a JSON object with the query.
            </div>
            <QueryBuilder
                allowDrag
                fields={[
                    {
                        label: 'Id',
                        dataField: 'id',
                        dataType: 'number'
                    },
                    {
                        label: 'Product',
                        dataField: 'productName',
                        dataType: 'string'
                    },
                    {
                        label: 'Unit Price',
                        dataField: 'price',
                        dataType: 'number'
                    },
                    {
                        label: 'Purchased',
                        dataField: 'purchased',
                        dataType: 'datetime'
                    },
                    {
                        label: 'Available',
                        dataField: 'available',
                        dataType: 'boolean'
                    }
                ]}
                id="queryBuilder"
            />
        </div>
    );
}

export default App;

4 Run the dev server

npm run dev

Open the URL Vite prints (often http://localhost:5173/).

Alternative: Next.js

Create an app with npx create-next-app@latest (Pages Router or App Router). Install the same package (npm install smart-webcomponents-react), then reuse the imports and default export from step 3 in pages/_app.tsx, the App Router root app/layout.tsx, or your top-level layout component so styles and the widget tree load once.

Common Use Cases

Get filter expression
Retrieve the current query as a filter
```
const filter = queryBuilder.value;
```

Set initial conditions

Pre-populate the query builder

queryBuilder.value = [
  ['productName', 'contains', 'Tea'],
  'and',
  ['price', '>', 5]
];

Troubleshooting

How do I get the filter expression?: Access queryBuilder.value to get the current conditions as an array that can be used for filtering data.
How do I add custom operators?: Define custom operators in the customOperations property for specific field types.

TypeScript Support

Types ship with smart-webcomponents-react. Import the component and prop types:

import type { QueryBuilder, QueryBuilderProps } from 'smart-webcomponents-react/querybuilder';

The generated wrappers expose on* callbacks (for example onChange) whose arguments are standard DOM Event values unless the widget typings narrow them further.

Live demos

Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.