Filters

Make it easy, make it filter.

Example

Props

🕹️ standard props
filter
Filter
The filter currently being edited
undefined
lang
'en' | 'it'
Language for labels
'en'
betweenFromLabel
string
Label for 'from' field in between mode
'From' or 'Da'
betweenToLabel
string
Label for 'to' field in between mode
'To' or 'A'
labelsMapper
LabelMapper
Label mapper for filter mode translations
undefined
forceApplyValid
boolean
Allows applying even if invalid
false
editFilterMode
'one-edit' | 'multi-edit'
Filter editing mode
'one-edit'
tmpFilter
Filter
Temporary filter state
undefined
mobile
boolean
If true, component adapts for mobile display
false
🎨 style props
--filters-button-cancel-background-color
color
Background color of the cancel button.
transparent
--filters-button-cancel-color
color
Text color of the cancel button.
rgb(var(--global-color-primary-400))
--filters-wrapper-width
size
Width of the filter wrapper container.
auto

Slots

customSnippet

Renders a custom field for 'custom' filter types

Available variables:

Name	Type	Description
filter	Filter | undefined	Current filter being edited

filterActionsSnippet

Custom rendering for action buttons or footer

Available variables:

Name	Type	Description
applyFilterDisabled	boolean	Whether the apply button should be disabled
filter	Filter | undefined	Current filter being edited

Events

onchange

Triggered when filter values change

Attribute	Type	Description
filter	Filter | undefined	The updated filter

onclick
Triggered on click on the container
onkeypress
Triggered on key press within the filter editor