Installation and initialization

SVAR Filter is an open-source library distributed under the MIT license.

Installing svelte-filter

To install the Svelte Filter library, you should run the following command:

//npm
npm install wx-svelte-filter

//yarn
yarn add wx-svelte-filter

Initializing

Import the needed component - FilterBuilder (core component), FilterEditor or FilterBar - and initialize it with its properties. For example, for FilterBuilder fields and options should be defined at the initialization stage.

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

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

const options = {
  first_name: [ "Alex", "Adam", "John", "Jane"],
  age: [ 17, 21, 35, 42]
  start: [ new Date(2025, 4, 7), new Date(2025, 4, 10)]
};

</script>

<FilterBuilder {fields} {options} />  

For the initialization instructions of each component, refer to the corresponding sections: FilterBuilder, FilterEditor, FilterBar.