AdvancedFilterBuilder

Pro

AdvancedFilterBuilder edits nested rule groups and emits both a filter tree and query string.

Get the code
Where
Current Query
Use Apply Filter to commit the current rules.

Installation

Add this component with the NateUI CLI.

npx @nateui/cli@latest add AdvancedFilterBuilder

Examples

Custom Fields

Get the code

Initial Value

Get the code

Popover

Get the code

Nested Groups

Get the code

Query Helpers

Get the code

Callback Events

Get the code

API

AdvancedFilterBuilder stores rule edits internally unless a new value tree is passed from the parent. All callbacks receive the current tree and the matching query string.

PropDescriptionTypeDefault
fieldsField list used to render the field dropdown, operator list, and value input for each rule.FieldConfig[]DEFAULT_FIELDS
valueFilter tree used to initialize or replace the builder state.FilterTree-
onChangeCalled after a rule or group edit.(tree: FilterTree, queryString: string) => void-
onApplyCalled when the Apply Filter button is pressed.(tree: FilterTree, queryString: string) => void-
onResetCalled after Reset restores a single empty rule.(tree: FilterTree, queryString: string) => void-

Utilities

ExportDescriptionType
toQueryStringSerializes a FilterTree to the query string form used by callbacks.(tree: FilterTree) => string
parseQueryStringParses a query string into a FilterTree. Field type coercion currently follows the built-in default fields.(query: string) => FilterTree

Types

type FieldType = 'text' | 'number' | 'select' | 'date' | 'boolean';
 
type FieldConfig = {
  key: string;
  label: string;
  type: FieldType;
  options?: Array<{ value: string; label: string }>;
};
 
type Rule = {
  id: string;
  type: 'rule';
  field: string;
  operator: string;
  value: string | number | boolean;
  logicalOperator?: 'AND' | 'OR' | 'NOT';
};
 
type RuleGroup = {
  id: string;
  type: 'group';
  condition: 'AND' | 'OR';
  children: Array<Rule | RuleGroup>;
  logicalOperator?: 'AND' | 'OR' | 'NOT';
};
 
type FilterTree = RuleGroup;