Skip to main content

createFilterRule

Description​

Creates a common filtering rule for several input fields

Usage​

createFilterRule(
  fields: { id: string; type?: string; [key: string]: any }[],
  filter: string,
  value: string | number
): {
  glue: "or";
  rules: {
    field: string,
    type: string,
    filter: string,
    value: string | number,
  }[];
} | null;

Parameters​

  • fields - (required) an array of field objects. Each object must contain at least the id property, which is the field identifier. Field objects may include an optional type property (e.g., "text", "number", etc.).
  • filter - (required) the filter operator, e.g., "equal", "greater", "contains", or any other supported operator. See filter types and operators
  • value - (required) the value used for filtering. If this is false (e.g., an empty string), the function returns null

Returns​

It returns an object with rules connected with OR logic that can be used for filtering. The object contains:

  • glue - (required) the "or" logic for combining filtering rules
  • rules - (required) an array of filtering rules. Each rule object has the following parameters:
    • field - (required) the id of a field. It is the same as the corresponding field id in the fields parameter
    • type - the type of the field ("text" by default if not provided)
    • filter - (required) the filter operator
    • value - (required) value for filtering

Example​

This example demonstrates how to use the createFilterRule helpers to convert fields configuration into rules and then use them in the filtering function returned by the createFilter helper

  import { getData } from "../data";
  import { createFilterRule, createFilter } from "@svar-ui/react-filter";

  const { fields, data } = getData();
  
  const rules = createFilterRule(fields, "contains", "b");
  const filter = createFilter(rules);
  const filteredData = data.filter(filter);