Skip to main content

getOptions

Description​

The function extracts filtering options for multiple fields at once

It uses the getOptions helpers inside to collect values for a single field.

Usage​

getOptionsMap(
  data: any[],
  config?: {
    id: string, 
    predicate?: "month" | "year",
    sort?: boolean | ((a: any, b: any) => number),
  }[]
): { [key: string]: any[] };

Parameters​

  • data - (required) a data array to extract values from
  • config - (optional) an array of field settings, each of which having:
    • id - (required) ID of the field to extract options from
    • 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 sort parameter to false.

Without config the options will be extracted according to data keys from the first data element.

Returns​

An object where each key corresponds to field id and its value is an array of unique values for this field.

Example​

The example shows how to use getOptionsMap to provide options to the FilterBuilder component based on the actual dataset.

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

/* getData() returns:
[
  { 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(2025, 2, 8) },
]
*/

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

  // getOptionsMap(data) =>
  // {
  //   first_name: ["Alex", "Agata"],
  //   age: [26, 35, 45],
  //   start: [new Date(2025, 0, 3), new Date(2025, 2, 8), new Date(2025, 2, 13)]
  // }
  return `<FilterBuilder fields={fields} options={getOptionsMap(data)} />`;
}