Skip to main content

fields

Description​

Required. An array with fields settings for FilterBar

Usage​

fields: [
  id: string |
  {
    type: string,
    id: string,
    filter: string,
    options?: { id: string | number, label: string }[],
    value?: any,
    label?: string,
    placeholder?: string,
  } |
  {
    type: "all" | "dynamic",
    by: (string | {} )[],
    label?: string,
    placeholder?: string,
  }
]

Parameters​

The fields array can include an array of fields ids or it can contain an array of objects. An object inside the array may be a simple or combined object with parameters described below.

A simple object that defines settings for a single field has the next parameters:

  • type - (required) the type of a field which can be "text", "number", "date"
  • id - (required) the id of a field
  • filter - (optional) the filter operator available for this field. By default, FilterBar uses "contains" for input filters and "equal" for selectors
  • label - (optional) text label that is displayed on the left
  • placeholder - (optional) input placeholder. By default it contains field id and filter
  • options - (optional) an array of options for a field (may include strings, numbers and dates). It enables a dropdown with options for the input field
  • value - (optional) field value

A combined filter that will be applied to multiple fields at a time:

  • type - (required) filtering control:
    • "all" - combines several fields into one input filtered at once with "contains" rule joined by OR logic
    • "dynamic" - combines several fields into one input filtered in turn. Selector is created to choose which field is used for filtering at the moment.
  • label - (optional) text label displayed on the left
  • placeholder - (optional) input placeholder. By default it contains field id and filter . - by - (required) an array of fields by which data is filtered. Each element may contains
    • string - field id ( for "all" type, this is the only options)
    • object - field settings from the list above

Example​

The example below shows how to add a FilterBar with a dropdown and filter data based on the selected option. To apply filtering rules to the data array, the createArrayFilter helper is used to convert the filter configuration into a function that filters the dataset.

<script>
  import { getData } from "../data";
  import { FilterBar, createArrayFilter } from "wx-svelte-filter";

  const { data } = getData();
  let filteredData = $state(data);

  const fields = [
    {
      id: "country",
      type: "text",
      options: ["Germany", "USA"],
      placeholder: "Select a country"
    }
  ];

  function applyFilter(value) {
    const filter = createArrayFilter(value);
    filteredData = filter(listData);
  }

</script>
<FilterBar
    {fields}
    onchange={({ value }) => applyFilter(value)}
/>

Related articles: FilterBar Guide