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​

<script>
  import { getData } from "./common/data";
  import { FilterBuilder } from "@svar-ui/svelte-filter";
  
  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)],
  };
  
</script>

<FilterBuilder {value} {fields} {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:

<script>
  import { FilterBuilder } from "@svar-ui/svelte-filter";

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

<FilterBuilder {fields} {value} options={provideOptions} />

Related articles: FilterBuilder Guide