@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 --save react-querybuilder @react-querybuilder/antd @ant-design/icons antd
# OR
yarn add react-querybuilder @react-querybuilder/antd @ant-design/icons antd

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={q => setQuery(q)} />
    </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

[v5.3.0] - 2022-12-23

Changed

• New rule and group ids are now generated as valid v4 UUIDs using crypto.getRandomValues() instead of Math.random(). The generateID function used internally is exported.
• [#418] TypeScript interface NameLabelPair has been deprecated and is now an alias for the Option interface.

Fixed

• [#407] Drag-and-drop will now allow drops on locked rules (which places the dragged rule/group below the drop target) and above locked rules/groups.
• [#411] When showCombinatorsBetweenRules is enabled, a combinator selector immediately above a locked rule/group will no longer be locked unless the group it belongs to is locked.
• jsonLogicAdditionalOperators is exported again (documentation).

Added

• [#422] Adding the class queryBuilder-branches displays "tree view" branch lines.
• [#426] Dynamic classnames based on the specific rule/group properties.
  • New function props getRuleClassname and getRuleGroupClassname are passed the rule or group, and the return value will be added as a class to the surrounding div.
  • Field, Operator, and new interface Combinator now have an optional className property that will be applied to rules or groups that specify the appropriate attribute.
• [#417] Optional arity property for operators. When arity is either "unary" or a number less than 2, the value editor will not render when that operator is selected (similar to the standard "null"/"notNull" operators).
• [#408] The interfaces Option (née NameLabelPair), Field, and ValueEditorProps now accept generics for name and other properties.
• [#418] A new OptionList type covers the options property for all standard selection lists (field, operator, combinator, etc.). Previously this was a union type: NameLabelPair[] | OptionGroup<NameLabelPair>[]. OptionList is equivalent to this type, but 1) doesn't require typing the base type twice, and 2) uses the new Option name instead of the deprecated NameLabelPair.
• [#421] When independentCombinators is enabled, custom onAddRule and onAddGroup callbacks can add a combinatorPreceding property to the rule/group which will end up being the combinator inserted above the new rule/group (if the parent group is not empty).