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 @svar-ui/svelte-filter

//yarn
yarn add @svar-ui/svelte-filter

note

The package migrated from wx-svelte-filter to @svar-ui/svelte-filter. We continue publishing wx-svelte-filter until the Svelte SVAR 3.0 update

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 "@svar-ui/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.