Skip to main content

change

Description​

Fires when changes are made and applied via the user interface

The event is triggered when a user deletes a rule, updates a rule, toggles the logic (glue) button or clicks Apply to add a rule.

Usage​

onChange: ({
    value: {
      glue: "and" | "or",
      rules: (
        {
          field: string | string,
          type?: string,
          filter?: string,
          predicate?: "month" | "year",
          includes?: any[],
          value?: any,
        } | 
        {
          glue: "and" | "or",
          rules: any[], // recursive
        }
      )[];
    }
}) => 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
    • "or" - shows records that correspond to at least one of the rules
  • 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" | "date" | "tuple"
    • filter - (optional) the filter operator available for this type
    • predicate - (optional) Date part extractor ("month" or "year") for date fields
    • value - (optional) the value in the field
    • includes - (optional) an array of the included values (strings, numbers or dates).

The rules object may also include the glue parameter and the rules object above.

Example​

The example below demonstrates how to filter the data array in response to changes in the FilterBuilder component. The createArrayFilter helper is used to build a filtering function:

import { useState } from "react";
import { getData } from "../data";
import { FilterBuilder, createArrayFilter } from "@svar-ui/react-filter";

export default function App() {
  const { data, fields, options } = getData();
  const [filteredData, setFilteredData] = useState(data);

  const init = (api) => {
    api.on("change", ev => {
      // Filter the data according to filtering rules
      const filter = createArrayFilter(ev.value);
      setFilteredData(filter(data));
    });
  };

  return (
    <div>
      <FilterBuilder fields={fields} options={options} init={init} />
      {/* Render or use filteredData as needed */}
    </div>
  );
}

Related articles: