@react-querybuilder/antd

@react-querybuilder/antd

Official react-querybuilder components for Ant Design.

To see them in action, check out the react-querybuilder demo or load the example in CodeSandbox.

Full documentation

Installation

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

Usage

To render Ant Design-compatible components in the query builder, wrap the <QueryBuilder /> element in <QueryBuilderAntD />.

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

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

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

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

Notes

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

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

• This package exports antdControlElements which can be assigned directly to the controlElements prop on <QueryBuilder /> (and also exports each component individually), but wrapping <QueryBuilder /> in <QueryBuilderAntD /> is the recommended method.

Changelog

[v7.4.2] - 2024-06-06

Added

• [#713] insert utility method to insert a new rule or group anywhere in the query hierarchy. insert is similar to add except that the new rule or group can be inserted at any path (add can only append a rule or group to the end of a group's rules array). The option replace: true will replace the rule or group at the specified path.

Fixed

• [#713] @react-querybuilder/dnd now supports dragging and dropping rules and groups across separate query builders. As with drag-and-drop within a single query builder, holding the modifier key (Alt on Windows/Linux, Option ⌥ on Mac) when dropping the rule/group will copy it instead of move it.
• [#713] debugMode now logs the query builder's qbId.
• [#714] parseJsonLogic can now override group operations ("and", "or", "!", and "!!") with the jsonLogicOperations option.