Skip to main content

onhange

Description

Fires when changes are made and applied via the user interface

The event is triggered when a user updates a rule.

Usage

onChange?: (ev: {
value: {
rules?: ({
field: string | number,
type?: "number" | "text" | "date" | "tuple",
predicate?: "month" | "year",
filter?: string,
includes?: any[],
value?: any
} | {
rules?: any[]; // nested rules
glue?: "and" | "or",
})[];
glue?: "and" | "or",
};
}) => void;

Parameters

The callback of the event takes the value object with the following parameters:

  • glue - (required) the logic for combining filtering rules:
    • "and" - returns records that satisfy all rules
    • "or" - returns records that satisfy at least one rule
  • rules - (required) an array of filtering rules. It can be an individual rule or a group of rules. Each rule object has the following parameters:
    • field - (required) the id of a field. It should be the same as the corresponding field id of the fields property
    • type - (optional) filter type: "text" (default) | "number"
    • predicate - (optional) Date part extractor ("month" or "year") for date fields
    • filter - (optional) the filter operator available for this type
    • includes - (optional) an array of values to include (strings, numbers, or dates)
    • value - (optional) the value to filter by

Example

In the example below we track changes made to the FilterBar and log the current filter configuration into console:

import { FilterBar } from "@svar-ui/react-filter";

const fields = [
"first_name",
{ id: "age", type: "number" },
{ id: "country", type: "text", options: ["USA", "Germany"] },
];

function handleChange(ev) {
console.log(ev.value);
}

export default function Example() {
return `<FilterBar fields={fields} onChange={handleChange} />`;
}

Related articles: FilterBar Guide