Skip to main content

api.getValue()

Description​

Gets the filter configuration object

Usage​

api.getValue:{
  glue?: "and" | "or";
  rules?: (
    | {
        field: string;
        type?: "text" | "number" | "date" | "tuple";
        predicate?: string;
        filter?: string;
        includes?: any[];
        value?: any;
      }
    | {
        glue?: "and" | "or";
        rules?: any[];
      }
  )[];
}: void;

Returns​

The method returns an object that represents filtering rules, which includes:

  • 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"
    • predicate - (optional) Date part extractor ("month" or "year") for date fields
    • filter - (optional) the filter operator available for this type
    • 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​

This example shows how to use the getValue() method of the FilterBuilder API to retrieve the current filtering configuration. When the user clicks the "Show value" button, the current filter (rules and groups) is fetched and logged to the console.

import { getData } from "../data";
import { FilterBuilder } from "@svar-ui/react-filter";
import { Button } from "@svar-ui/react-core";
import { useRef } from "react";

export default function Example() {
  const { value, fields, options } = getData();
  const api = useRef(null);

  function logValue() {
    console.log(api.current.getValue());
  }

  return (
    <>
      `<Button type="secondary" onClick={logValue}>`Log value</Button>
      `<FilterBuilder ref={api} value={value} fields={fields} options={options} />`
    </>
  );
}

Related articles: How to access FilterBuilder API