filter

Description

Optional. Defines the input UI and available comparison operators

Usage

filter?: string;

The property takes the next values depending on the filter type ("text", "number", "date", "tuple"):

Filter Type	Input UI	Description	Supported filter values
text	Text input	Freeform string input	contains, notContains, equal, notEqual, beginsWith, notBeginsWith, endsWith, notEndsWith
number	Number input	Integer or decimal input	greater, less, greaterOrEqual, lessOrEqual, equal, notEqual, contains, notContains, beginsWith, notBeginsWith, endsWith, notEndsWith
date	Date picker / range calendar	Date or range selector	greater, less, greaterOrEqual, lessOrEqual, equal, notEqual, between, notBetween
tuple	Dropdown	List of numbers with formatted values	greater, less, greaterOrEqual, lessOrEqual, equal, notEqual

Example

The example shows how to apply a "greater" numeric filter. We create a numeric filter over the year part of the date field (getOptions extracts unique year numbers from the "start" field) and allow the user to filter items by start year, e.g.: "Year > 2024".

<script>
  import { FilterEditor, getOptions } from "@svar-ui/svelte-filter";
  
  // Get year numbers from "start" date field
  // [ 2024, 2025 ]
  const options = getOptions(data, "start", {
      predicate: "year",
  });
      
</script>

<FilterEditor field="start" type="number" {options} filter="greater" />

---

Related articles: FilterEditor Guide