FilterEditor

FilterEditor is a standalone control from the FilterBuilder widget that allows editing a filtering rule for a single field. It provides API for switching the field for filtering, setting and getting the current rule value.

Initialization

To add FilterEditor to your page, follow the steps below:

First, import the FilterEditor component and put it into your markup:

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

<FilterEditor />

This renders an empty FilterEditor, but to make it functional, you must specify a single field for filtering together with its options and the desired filter type for it.

Filter type can be of text, number, tuple or date. Each type supports appropriate operators.

<FilterEditor
  field={"age"} 
  type={"number"} 
  options={[ 17, 21, 35, 42 ]}
/>

How to configure a single filter

Basically, FilterEditor properties correspond to the properties of a single field from FilterBuilder fields and a single rule from FilterBuilder value. The exception is the label that should be set with a separate Field control from the wx-svelte-core library:

<script>
  import { Field } from "wx-svelte-core";
  import { FilterEditor } from "wx-svelte-filter";
</script>

<Field label="Age:">
  <FilterEditor 
    field="age" 
    type={"number"} 
    filter="greater"
    value={30}
    {options}/>
</Field>

How to add multiple fields

FilterEditor can display and edit one filtering rule at a time, but you can enable fields selector in it to switch between various fields. In this case, the field setting defines the initially visible field.

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

  const fields = [
    { id: "first_name", label: "First Name", type: "text" },
    { id: "age", label: "Age", type: "number" },
    { id: "country", label: "Country", type: "text" }
  ];
</script>

<FilterEditor field={"age"} options={[ 17, 21, 35, 42 ]} /> 

Note that filter type is taken from the fields array, but the options need to be changed dynamically. It can be done by defining the options as a function that takes field id and returns an array of possible values.

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

  const fields = [
    { id: "first_name", label: "First Name", type: "text" },
    { id: "age", label: "Age", type: "number" },
    { id: "country", label: "Country", type: "text" }
  ];

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

  // Provide dynamic options based on selected field
  function provideOptions(field) {
    return options[field] || [];
  }
</script>

<FilterEditor {fields} field="age" options={provideOptions} />

How to remove field selector

When multiple fields are defined, FilterEditor shows a field selector as a topmost line. To hide it, set the fieldsSelector property to false. In this case field can be changed programmatically:

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

  let field = $state("age");
  // programmatically change the field 
  field = "country";
</script>
<FilterEditor {fields} {field} fieldsSelector={false} />

How to remove buttons

By default, the widget displays "Cancel" and "Apply" buttons, but you can hide them by setting the buttons property to false:

<FilterEditor buttons={false} />

How to track changes in filter

You can track changes made to the filter and take action when the filter value changes.

The onchange event is triggered when a rule is updated or a filter value is changed
The onapply event is triggered when the user clicks the Apply button
The oncancel event is triggered when the Cancel button is clicked.

For example, set the onchange event to log the updated filtering rule:

<script>
  const handleChange = ({value}) => {
    console.log(value);
  };
</script>

<FilterEditor onchange={handleChange} />

You can retrieve filter options from the related dataset. Use the getOptions helper to extract unique values for a specified field. You can optionally apply a predicate to transform the values (see Working with dates) and set the sort function to sort the results.

In the example below, we extract values from the "country" field and sort them in a descending order:

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

  const { data } = getData();

  const options = getOptions(data, "country", { 
    sort:((a, b) => a - b)
  });
</script>

<FilterEditor field="country" {options} type="text" />

Working with dates

FilterEditor expects JavaScript Date objects for date fields. If your data contains date strings, convert them to Date objects before passing them as options.

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

  const options = [new Date(2024, 4, 21), new Date(2024, 8, 5)];
</script>

<FilterEditor type="date" field="start" {options} />

If you want to use only month or year numbers extracted from date fields, use the getOptions helper and pass the predicate ("month" or "year") to it. Such options should be used for "number" or "tuple" filters:

<script>
  import { FilterEditor, getOptions } from "wx-svelte-filter";

  const data = [
    { start: new Date(2025, 0, 3) },
    { start: new Date(2025, 2, 13) },
  ];

  const options = getOptions(data, {
    id: "start",
    predicate: "month",
  }); // [0, 2]
</script>

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

Date and number formatting

By default, dates are formatted in UI according to the current locale. But you can change the format for a specific field by providing it as the format property that can be:

string - defines format for "date" filter according to the rules;
function - defines format for "date", "number" and "tuple" filters.

<FilterEditor
  type="date"
  format="%y-%m-%d" // Custom date format: 25-01-01 for Jan 1, 2025
  options={[new Date(2025, 0, 1)]}
/>

If you set the fields array, you can apply the format parameter inside the fields property:

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

  const fields = {
	  start: {
      type: "date",
      format: "%y-%m-%d", 
      options: [new Date(2025, 0, 1)],
      filter: "equals",
      value: new Date(2025, 0, 1)
    }
  };
</script>

<FilterEditor field="start" fields={fields} />

You can format numbers by providing a format function either as widget format property or as a setting within the fields array. Here is an example of a "number" filter:

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

  // Converts numbers like 1000 to "1,000"
  const formatNumber = (n) => n.toLocaleString();

  const options = [1000, 1500, 2000, 25000];
</script>

<FilterEditor
  field="salary"
  type="number"
  {options}
  format={formatNumber}
/>

As well as for "tuple" filter. This filter allows filtering by numeric values that are mapped to human-readable options in a dropdown list:

<script>
  import { FilterEditor } from "wx-svelte-filter";
  const numberToMonth = (v) => {
    const months = ["Jan", "Feb", "Mar", "Apr"];
    return months[v];
  };
</script>

<FilterEditor 
  field={"start"}
  type="tuple" 
  options={[0, 1, 2]} 
  format={numberToMonth} 
/>

Initialization​

How to configure a single filter​

How to add multiple fields​

How to remove field selector​

How to remove buttons​

How to track changes in filter​

How to collect filter options​

Working with dates​

Date and number formatting​