# Filters

Source: https://lumeo.nativ.sh/components/filters

# Filters

A filter builder: add a filter, pick the attribute, the condition and the value inside the chip, with an editor per value kind. ReUI's Filters, ported: the same operator catalogue, the same query tree, the same chip anatomy.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Filters />

## When to Use

-   A toolbar over a table or list where users build their own conditions: field, operator, value
-   A saved-search or report screen that stores a query tree and restores it later
-   Anything [FilterBar](/components/filter-bar) is too small for: FilterBar shows active filters, Filters lets the user write them

Preview Code

Default

Add filter

no rules

Text, number, select, multiselect, date and boolean fields. The add-filter button opens the attribute list; picking one adds a chip and opens its condition, then its value. Each chip segment reopens on click, the menu duplicates, negates or removes.

Preview Code

Small

Status

is

In review

Amount

is greater than

100

Clear

Size=Sm puts every chip, button and editor control on the 28px rung.

Preview Code

Nested attributes

CustomerAddressCountry

is

Croatia

A field with child fields becomes a branch the picker drills into; a search reaches every level. The chip shows the path and collapses a long one.

Preview Code

Async options

Owner

is

Person 42

LoadOptions receives the search text and a cursor and returns a page; the list shows loading, retry and load-more rows. ResolveValues gives a restored chip its labels before the list was ever opened.

Preview Code

Custom editor and value

Rating

is greater than or equal to

★★★★★

EditorTemplate replaces the editor of one field, ValueTemplate the value segment of every chip.

Preview Code

Read only and disabled

Status

is

In review

Amount

is greater than

100

Clear

Status

is

In review

Amount

is greater than

100

Clear

Read only keeps every chip focusable and readable and refuses edits; disabled removes the tab stops as well.

Preview Code

Advanced: nested conditions

Where

Status

is

In review

And

Where

Amount

is greater than

Or

Tags

has any of

Urgent

Add filter

Add filter Add groupClear all

status is "review"

amount gt 100

tags has\_any\_of "urgent"

Variant=Advanced renders a condition builder: rows with a combinator per group, groups that nest, a menu to wrap a row in a group or move it, and Alt with the arrow keys or the drag handle (Reorderable) to reorder. Inline here; the default puts it behind a trigger in a popover.

Preview Code

Advanced in a popover

Advanced filter2

The same builder behind a trigger that counts the rules; a chip row can hand over to it through OnConvertToAdvanced.

Preview Code

Events and veto

Add filter

Last change: none, 0 rule(s)

OnQueryChanged carries the new query and the reason; OnBeforeQueryChange returns false to refuse a change. Here a fourth rule is refused.

## API Reference

### Filters

### FilterField

`Id`, `Label`, `Kind` (Text, Number, Range, Date, Select, MultiSelect, Boolean), `Options` or `LoadOptions` and `ResolveValues` for option-backed fields, `Fields` for a branch, `Operators` and `DefaultOperator` to replace the catalogue, `Editor` / `EditorTemplate`, `ValueTemplate` / `ValueText`, `Validate`.

### FilterQuery

A tree of `FilterRule` (Path, Operator, Value, Negated) and `FilterGroup` (Combinator, Rules); the root is always a group. `Flatten()` returns the complete rules as `FilterTerm`s (Field, Operator, Values, Negated) for an API call; `FilterQueries` holds every operation (insert, update, remove, duplicate, move, wrap, unwrap, prune, CollectIssues) as pure functions. A value is a string, double, bool or `FilterDateValue`, an `IReadOnlyList<string>` for a many-valued operator, or a `FilterRange`. The tree round-trips through `System.Text.Json` (nodes carry a `$type` discriminator, values come back in their shape), so a saved search stores the query as is. `CollectIssues()` on the component reports what is not ready to run, a field's own `Validate` message included.

## Operators per kind

Kind

Operators

Text

contains, not\_contains, starts\_with, ends\_with, is, is\_not, empty, not\_empty

Number

eq, neq, gt, gte, lt, lte, between, not\_between, empty, not\_empty

Range

between, not\_between, empty, not\_empty

Date

is, is\_not, is\_before, is\_after, is\_on\_or\_before, is\_on\_or\_after, between, not\_between, empty, not\_empty

Select

is, is\_not, is\_any\_of, is\_none\_of, empty, not\_empty

MultiSelect

has\_any\_of, has\_all\_of, has\_none\_of, empty, not\_empty

Boolean

is, is\_not, empty, not\_empty

Operator labels come from the `Filters.Op.*` keys of the locale catalogue; every other string from `Filters.*`. Build a `FilterLabels` with `FilterLabels.FromLocalizer(L)`, change a property, and hand it to `Labels` to override one.

## Related Components

-   [FilterBar](/components/filter-bar) — Shows active filters as pills; Filters builds them.
-   [DataGrid](/components/data-grid) — Map the flattened terms onto `FilterDescriptor`s, or onto your server request.