options

Description

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

Usage

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

Parameters

Each parameter is the key that should be the same as the field id of the fields property.

The property can be a function that receives field id and returns options. This function can be async as well.

Example

<script>
  import { getData } from "./common/data";
  import { FilterBuilder } from "wx-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 "wx-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