getOptions
Description
The function returns the list of options for a specified fieldThe getOptions helper extracts unique values from a data array based on a specific field.
Usage
getOptions: (
  data: { [key: string]: any }[],
  field: string,
  config?: {
    predicate?: "month" | "year",
    sort?: boolean | ((a: any, b: any) => number),
  }
) => any[];
Parameters
- data- (required) a data array to extract values from
- field- (required) ID of the field to extract options from
- config- (optional) an object with:- predicate- (optional) extracts month or year from date fields
- sort- (optional) a comparison function to sort the result. Dates and numbers are sorted by default in the ascending order; to cancel this, set the- sortparameter to false. It can be a custom comparator function, like in- Array.sort, to define your own sorting logic
 
Returns
An array of unique options for the required field.
Example
Take the following dataset:
[
  { first_name: "Alex", age: 26,start: new Date(2025, 0, 3) },
  { first_name: "Alex", age: 45, start: new Date(2025, 2, 13) },
  { first_name: "Agata", age: 35, start: new Date(2024, 2, 8) },
]
In the example below the getOptions extracts unique names from the "first_name" field and sorts them in a descending order:
import { useMemo } from "react";
import { getData } from "../data";
import { FilterEditor, getOptions } from "@svar-ui/react-filter";
function NamesFilterExample() {
  const { data } = getData();
  const options = useMemo(
    () =>
      getOptions(data, "first_name", {
        sort: (a, b) => a - b,
      }),
    [data]
  );
  return `<FilterEditor field="first_name" type="text" options={options} />`;
}
In the next example the getOptions extracts unique year numbers from the "start" field (sorted by default). Such can should be used in "number" or "tuple" filters:
import { useMemo } from "react";
import { getData } from "../data";
import { Filter, getOptions } from "@svar-ui/react-filter";
function StartYearFilterExample() {
  const { data } = getData();
  // Get year numbers from "start" date field
  // [ 2024, 2025 ]
  const options = useMemo(
    () =>
      getOptions(data, "start", {
        predicate: "year",
      }),
    [data]
  );
  return `<Filter field="start" type="number" options={options} />`;
}