@react-querybuilder/tremor

@react-querybuilder/tremor

Official react-querybuilder compatibility package for Tremor.

• Demo
• Full documentation
• CodeSandbox / StackBlitz example projects

Installation

npm i react-querybuilder @react-querybuilder/tremor @tremor/react
# OR yarn add / pnpm add / bun add

Usage

To configure the query builder to use Tremor-compatible components, place QueryBuilderTremor above QueryBuilder in the component hierarchy.

import { useState } from 'react';
import { QueryBuilderTremor } from '@react-querybuilder/tremor';
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 (
    <QueryBuilderTremor>
      <QueryBuilder fields={fields} defaultQuery={query} onQueryChange={setQuery} />
    </QueryBuilderTremor>
  );
}

QueryBuilderTremor 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
tremorControlElements	controlElements
tremorControlClassnames	controlClassnames
TremorActionElement	controlElements.actionElement
TremorNotToggle	controlElements.notToggle
TremorShiftActions	controlElements.shiftActions
TremorValueEditor	controlElements.valueEditor
TremorValueSelector	controlElements.valueSelector

Changelog

[v8.1.1] - 2025-01-20

Fixed

• [#840] The behavior and list of valid values for the formatQuery option parseNumbers now aligns with the corresponding QueryBuilder prop, as long as a fields array is also provided.
• [#836] AntDValueSelector now filters on the label property and defines options with the options prop instead of a children array of <Select.OptGroup>/<Select.Option>.
• [#836] Utilities that determine whether arrays are valid option lists (isFullOptionArray, isFlexibleOptionArray, isFullOptionGroupArray, isFlexibleOptionGroupArray) are now more strict: All leaf elements must conform to the operative type, not just the first element.
• The "mssql" formatQuery preset now sets paramPrefix: '@'.