@react-querybuilder/antd

@react-querybuilder/antd

Official react-querybuilder compatibility package for Ant Design.

• Demo
• Full documentation
• CodeSandbox / StackBlitz example projects

Installation

npm i react-querybuilder @react-querybuilder/antd @ant-design/icons antd
# OR yarn add / pnpm add / bun add

Usage

To configure the query builder to use Ant Design-compatible components, place QueryBuilderAntD above QueryBuilder in the component hierarchy.

import { QueryBuilderAntD } from '@react-querybuilder/antd';
import { useState } from 'react';
import { type Field, QueryBuilder, type RuleGroupType } from 'react-querybuilder';

const fields: Field[] = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
];

export function App() {
  const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });

  return (
    <QueryBuilderAntD>
      <QueryBuilder fields={fields} defaultQuery={query} onQueryChange={setQuery} />
    </QueryBuilderAntD>
  );
}

[!NOTE]

You may also want to reduce the width of the value editor component (which is 100% by default) with the following CSS rule.

.queryBuilder .ant-input {
  width: auto;
}

QueryBuilderAntD is a React context provider that assigns the following props to all descendant QueryBuilder elements. The props can be overridden on the QueryBuilder or used directly without the context provider.

Export	QueryBuilder prop
antdControlElements	controlElements
antdTranslations	translations
AntDActionElement	controlElements.actionElement
AntDDragHandle	controlElements.dragHandle
AntDNotToggle	controlElements.notToggle
AntDShiftActions	controlElements.shiftActions
AntDValueEditor	controlElements.valueEditor
AntDValueSelector	controlElements.valueSelector

[!TIP]

By default, this package uses icons from @ant-design/icons for button labels. To reset button labels to their default strings, use defaultTranslations from react-querybuilder.

<QueryBuilderAntD translations={defaultTranslations}>

Changelog

[v8.6.0] - 2025-05-05

Added

• [#885] New package @react-querybuilder/drizzle for integration with the Drizzle ORM query builder API.
• [#885] LDAP export format.
• [#885] New formatQuery option ruleGroupProcessor enabling development of custom output formats without completely reimplementing formatQuery.
  • The rule group processors for each of the existing formats have been extracted from formatQuery and can be used independently or as fallbacks from custom processors.
• [#883] Query tools add, update, remove, move, and group can now accept a string or Path where they previously accepted only Path-type arguments. A string would represent the id property of the subject rule/group, but otherwise the functionality of each tool is the same.
• [#883] New utility methods: findID returns the rule or group with the given id property within a query hierarchy (similar to findPath), and getPathOfID returns the path of the rule or group with the given id.
• [#885] Confirmed Mantine v8 support (no changes).

Fixed

• [#885] parseSQL was translating NOT LIKE '[...]' (no leading or trailing wildcards) to operator: "=" instead of operator: "!=".
• [#885] Importing from react-querybuilder/formatQuery no longer has a dependency on react.