value

Description

Optional. An object with filtering rules

Usage

value?: {
  glue: "and" | "or",
  rules: (
    {
      field: string | number,
      type?: string,
      filter?: string,
      predicate?: "month" | "year",
      includes?: any[],
      value?: any,
    } | 
    {
      glue: "and" | "or",
      rules: any[], // recursive
    }
  )[];
};

Parameters

The value object has 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
  • predicate - (optional) Date part extractor ("month" or "year") for date fields
  • type - (optional) filter type: "text" (default) | "number" | "date" | "tuple"
  • 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

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

export default function Example() {
  const { fields, options } = getData();

  const value = {
    glue: "or",
    rules: [
      {
        field: "first_name",
        filter: "equal",
        value: "Alex",
      },
      {
        field: "first_name",
        includes: ["Daisy"],
      },
      {
        glue: "and",
        rules: [
          {
            field: "age",
            filter: "greater",
            value: 40,
          },
          {
            field: "age",
            filter: "less",
            value: 60,
          },
        ],
      },
    ],
  };

  return `<FilterBuilder value={value} options={options} fields={fields} />`;
}

---

Related articles: FilterBuilder Guide