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@latest add AdvancedFilterBuilder

              Examples

              Custom Fields

              Get the code
              Where
                  Current query
                  Start with the first rule.

                  Initial Value

                  Get the code
                  Where
                                      (status=active AND rating>=4 OR category=electronics)

                                      Popover

                                      Get the code

                                      Nested Groups

                                      Get the code
                                      Where
                                              Where
                                                        Last applied
                                                        (status=processing OR (customer~=acme AND item_count>2))

                                                        Query Helpers

                                                        Get the code
                                                          Where

                                                                              Callback Events

                                                                              Get the code
                                                                              Where
                                                                                    Event log
                                                                                    • No callback has fired yet.

                                                                                    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;