FilterBar

The FilterBar widget provides a user-friendly input bar that allows creating filters through simple form controls (input/select).

Initialization

To create a FilterBar instance on a page, follow these steps:

First, import the FilterBar component and insert it into your markup:

<script>
    import { FilterBar } from "wx-svelte-filter";
</script>

<FilterBar />

This renders an empty filter bar. To make it functional, you must pass the fields property, which defines the structure of each filterable field.

<script>
  import { FilterBar } from "wx-svelte-filter";
  const fields = [
    "first_name",
    { id: "age", type: "number"}
  ];
</script>

<FilterBar {fields} />

How to add different types of filters

The FilterBar allows defining fields with their filters that come as input controls for the user. You can use two types of filters: text and number.

Unlike FilterBuilder, each filter in FilterBar has a single predefined operator which is "contains" for text and number filters and "equal" for the select filter.

Fields can be defined as:

• string - field id (matches you data key) to set a simple text filter with "contains" operator and default placeholder
• object - filter configuration that includes:
  • id - the unique identifier for the field
  • type - the filter type ("text", "number", "date")
  • filter - comparison operator, such as greater, equal, contains, etc
  • options - the list of options to select from a dropdown
  • label - the label for the field (placed on the left)
  • placeholder - placeholder text for input fields
  • value - the initial value in the input

<script>
  import { FilterBar } from "wx-svelte-filter";
  const fields = [
    "first_name", //text 
    {
      id: "country",
      type: "text",
      label: "Select Country",
      options: ["USA", "UK", "Canada"]
    },
    {
      id: "age",
      type: "number",
      filter: "greater",
      label: "Age",
      placeholder: "Enter age"
    }
  ];

</script>
<FilterBar {fields} />

Adding the one-for-all filter

You can filter by multiple data fields using a single text input. These fields are grouped under a special type called "all". In the resulting filtering rule the OR logic is used:

<FilterBar
  fields={[
    {
      type: "all", //text filter
      label: "Search by multiple fields",
      by: ["first_name", "last_name"]
    }
  ]}
/>

Adding the dynamic filter

By setting the "dynamic" type you allow a user to select which field to filter by at a time. Filters are not combined, instead, filtering is performed by the currently selected field:

const fields = [
  {
    type: "dynamic",
    label: "Select field",
    by: [
      "first_name",
      "last_name",
      {
        id: "country",
        type: "text",
        options: ["USA", "Germany"]
      }
    ]
  }
];

How to add dropdowns to FilterBar

To create a dropdown, set the options parameter of the fields property to provide an options array directly in the field definition.

const fields = [
  {
    id: "status",
    type: "text",
    label: "Status",
    options: [ "Active", "Inactive", "Pending"],
    placeholder: "Select status"
  },
  {
    id: "age",
    type: "number",
    label: "Age",
    options: [ 21, 35, 42 ],
    placeholder: "Select age"
  }
];

Also, you can provide options as an array of objects, where id refers to the option value and label defines the text label for it:

const fields = [
  {
    id: "month",
    type: "number",
    label: "Month",
    options: [ 
      { id:0, label: "January"},
      { id:1, label: "February"},
      // etc
    ]
  }
]

How to filter the data

The FilterBar widget provides a visual interface for building filter conditions, but it does not filter your dataset on its own.

To apply filters to an array of data, listen to the onchange event of the FilterBar widget and use the createArrayFilter helper to create a filtering function based on the current FilterBar value. Then you can use this function to filter your dataset.

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

  const data = [
    { first_name: "Alex", country: "USA", age: 26 },
    { first_name: "Alex", country: "Germany", age: 45 },
  ];

  const fields = [
    "first_name",
    { id: "country", type:"text" options:["USA", "Germany"] }
  ]

  let filteredData = $state(data);

  function applyFilter(value) {
    const filter = createArrayFilter(value);
    filteredData = filter(data);
  }
</script>

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