Skip to main content

createArrayFilter

Description​

The function takes filter value as an input and returns a filtered array

It uses the createFilter helper inside.

Usage​

createArrayFilter(
  cfg: {
    glue?: "and" | "or",
    rules: {
      field: string,
      type?: "date" | "number" | "text" | "tuple",
      predicate?: "month" | "year",
      filter?: string,
      value?: string | number | Date,
      includes?: any[],
    }[];
  },
  options?: { orNull?: boolean }
): ((data: any[]) => any[]) | null;

Parameters​

  • cfg - (required) filter settings:
    • glue - (optional) the logic for combining filtering rules:
      • "and" (default) - displays records that satisfy all rules
      • "or" - displays records that satisfy at least one rule
    • rules - (required) an array of filtering rules. Each rule object can be an individual rule or a nested group (IFilterSet). Each rule has the following properties:
      • field - (required) the ID of the field; must match the corresponding field in the fields array
      • type - (optional) filter type: "text" (default) | "number" | "date" | "tuple"
      • predicate - (optional) date part extractor for date fields: "month" | "year"
      • filter - (optional) the filter operator available for this type
      • value - (optional) the value to filter by
      • includes - (optional) an array of values to include
  • options - (optional) behavior when no rules are set:
    • orNull: true - returns null when there are no rules
    • orNull: false (default) - returns the array

Returns​

A function takes an array and returns its filtered copy.

Example​

This example demonstrates how to use createArrayFilter to generate a function to filter a data array.

<script>
  import { getData } from "../data";
  import { FilterBuilder, createArrayFilter } from "@svar-ui/svelte-filter";

  const { value, fields, options, data } = getData();

  let filteredData = $state([]);

  function applyFilter(value) {
      const filter = createArrayFilter(value);
      filteredData = filter(data);
  }

  // Apply initial filter
  applyFilter(value);
</script>

<FilterBuilder
    {value}
    {fields}
    {options}
    onchange={({ value }) => applyFilter(value)}
/>