@react-querybuilder/fluent

@react-querybuilder/fluent

Official react-querybuilder components for Fluent UI.

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/fluent @fluentui/react-components @fluentui/react-icons-mdl2
# OR yarn add / pnpm add / bun add

Usage

To render Fluent UI-compatible components in the query builder, wrap the <QueryBuilder /> element in <QueryBuilderFluent />.

import { FluentProvider, webLightTheme } from '@fluentui/react-components';
import { QueryBuilderFluent } from '@react-querybuilder/fluent';
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 (
    <FluentProvider theme={webLightTheme}>
      <QueryBuilderFluent>
        <QueryBuilder fields={fields} query={query} onQueryChange={setQuery} />
      </QueryBuilderFluent>
    </FluentProvider>
  );
};

Notes

• This package exports fluentControlElements which can be assigned directly to the controlElements prop on <QueryBuilder /> (and also exports each component individually), but wrapping <QueryBuilder /> in <QueryBuilderFluent /> 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 (<kbd>Alt</kbd> on Windows/Linux, <kbd>⌥ Option</kbd> 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.