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: ( 
  value: {
    glue: "and",
    rules: {
      field: string,
      type?: string,
      filter?: string,
      value?: any,
    }[];
  };
) => void;

Parameters​

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

  • glue - (required) the logic for combining filtering rules:
    • "and" - displays records that correspond to all rules at once
  • 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"
    • filter - (optional) the filter operator available for this type
    • value - (optional) the value in the field

Example​

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

<script>
  import { FilterBar } from "wx-svelte-filter";

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

  function handleChange(ev) {
    console.log(ev.value);
  }
</script>

<FilterBar
  {fields}
  onchange={handleChange}
/>

Related articles: FilterBar Guide