Skip to main content

options

Description​

Required. An object with field options or a function that receives field id and returns options

Usage​

options: { [key: string]: AnyData[] }
  | ((field: string) => AnyData[] | Promise<AnyData[]>);

Parameters​

If options is an object, each parameter is the key that should match the field id of the fields property.

The property can be a function that receives field id and returns options. The function can return options synchronously or asynchronously.

Example​

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

export default function App() {
  const { value } = getData();

  const fields = [
    { id: "first_name", label: "First Name", type: "text" },
    { id: "age", label: "Age", type: "number" },
    { id: "start", label: "Start Date", type: "date" },
  ];

  const options = {
    first_name: ["Alex", "Adam", "Agata"],
    age: [24, 26, 33, 35, 44, 45, 62],
    country: [new Date(2025, 1, 15), new Date(2025, 5, 11)],
  };

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

Options for all fields can be collected from data with the getOptionsMap helper.

Options can be dynamic. You can define them as a function that is called each time a filter for this field is created. It returns either an array of options or a Promise that resolves with this array:

import { FilterBuilder } from "@svar-ui/react-filter";

async function provideOptions(fieldId) {
  const response = await fetch("server/url/" + fieldId);
  let options = await response.json();
  // convert string dates, if any
  return options;
}

export default function App({ fields, value }) {
  return `<FilterBuilder fields={fields} value={value} options={provideOptions} />`;
}

Related articles: FilterBuilder Guide