Filter

The Filter component is used to show and handle the filter values.

Import

import { Filter } from "@schukai/monster/source/components/datatable/filter.mjs";

Source

View source code

Package

@schukai/monster

Since

1.0.0

My Hidden Filter My Filter

Introduction

The Filter Component is a versatile and powerful tool designed to enhance interactivity and engagement within web applications. More than just a standard UI element, this component serves as a crucial element for dynamic data filtering, allowing users to refine and explore content effortlessly. Whether your project is a simple website or a complex enterprise-level application, the Filter Component is built to improve user interaction and satisfaction.

Key Features

Dynamic Filtering: Enables users to apply and adjust filters in real-time, making data exploration more intuitive and responsive.
Customizable Appearance: Offers extensive styling options to ensure seamless alignment with your application's design and branding.
Accessibility: Designed to be inclusive, supporting keyboard navigation, screen readers, and assistive technologies for a seamless user experience.
Visual Feedback: Provides responsive feedback to user actions, ensuring a clear and engaging interaction model.
Programmatic Control: Includes APIs for managing filters dynamically, resetting selections, and saving configurations, offering flexibility to developers.

Improving the User Experience

The Filter Component goes beyond traditional filtering capabilities by delivering an enhanced user experience. Its combination of real-time feedback, dynamic interaction, and accessible design ensures users can interact with and refine data efficiently, making the web experience more intuitive and user-friendly.

These features are backed by research and user studies that demonstrate significant improvements in user engagement and satisfaction.

Efficiency in the Development Process

Seamlessly integrating the Filter Component into your development workflow is straightforward. Its compatibility with standard web technologies and modular design ensures it fits into projects of any scale. Whether working on a small website or a large-scale application, this component simplifies filter management, streamlines the development process, and enhances overall productivity.

First Filter

In this example, a simple filter with two filtering options is demonstrated. The example is not yet connected to a data source.

Input Filter Date Range Filter

Javascript

import '@schukai/monster/source/components/datatable/filter.mjs';

HTML

<monster-datatable-filter>
    <!-- the attribute "data-monster-label" is used to define the label for the select element -->
    <!-- The text node inside the label is the label for the filter element -->
    <label data-monster-label="Input">Input Filter
        <monster-filter-input></monster-filter-input>
    </label>

    <!-- the next filter is hidden, because the attribute "slot" and the value "hidden" are used -->
    <label slot="hidden" data-monster-label="Date Range">Date Range Filter
        <monster-filter-date-range></monster-filter-date-range>
    </label>

</monster-datatable-filter>

Stylesheet

/** no additional stylesheet is defined **/

Advanced Filter

In this example, we link the filter to a data source.

Input Filter Date Range Filter

Javascript

import '@schukai/monster/source/components/datatable/filter.mjs';

HTML

<monster-datatable-filter>
    <!-- the attribute "data-monster-label" is used to define the label for the select element -->
    <!-- The text node inside the label is the label for the filter element -->
    <label data-monster-label="Input">Input Filter
        <monster-filter-input></monster-filter-input>
    </label>

    <!-- the next filter is hidden, because the attribute "slot" and the value "hidden" are used -->
    <label slot="hidden" data-monster-label="Date Range">Date Range Filter
        <monster-filter-date-range></monster-filter-date-range>
    </label>

</monster-datatable-filter>

Stylesheet

/** no additional stylesheet is defined **/

Store Filter

in diesem beispiel schalten wir die speicherfähigkeit für die filterung ein. dazu muss man das html attribut data-monster-option-features-storedConfig auf true setzen. und die ID des Tabs Controls in das Attribut data-monster-option-storedConfig-selector setzen.

Input Filter Date Range Filter

Javascript

import '@schukai/monster/source/components/datatable/filter.mjs';

HTML

<monster-tabs>



<monster-datatable-filter>
    <!-- the attribute "data-monster-label" is used to define the label for the select element -->
    <!-- The text node inside the label is the label for the filter element -->
    <label data-monster-label="Input">Input Filter
        <monster-filter-input></monster-filter-input>
    </label>

    <!-- the next filter is hidden, because the attribute "slot" and the value "hidden" are used -->
    <label slot="hidden" data-monster-label="Date Range">Date Range Filter
        <monster-filter-date-range></monster-filter-date-range>
    </label>

</monster-datatable-filter>


</monster-tabs>

Stylesheet

/** no additional stylesheet is defined **/

Component Design

The Filter Component leverages the Shadow DOM to encapsulate its internal structure and styling. Using a shadow root, the component ensures its internal elements remain isolated, preventing external scripts or styles from interfering with its layout or behavior.

Dynamic Filtering

The Filter Component is designed to handle dynamic data. It provides an intuitive interface for users to configure and apply filters in real-time. Developers can programmatically set default filters, manage user selections, and implement custom query-building logic through exposed APIs.

Customizing Through Exported Parts

Although the Shadow DOM encapsulates the component's structure, customization is possible through exported parts. Specific parts of the Filter Component are explicitly marked for export, enabling developers to style them via CSS without compromising its encapsulation.

Available Part Attributes

control: Represents the control area of the filter, including search and reset buttons. Use this to style the control layout and behavior.

Example CSS customization:


monster-filter::part(control) {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 4px;
}

Accessibility

Accessibility is a key focus of the Filter Component. It includes support for keyboard navigation, screen readers, and other assistive technologies, ensuring usability across diverse user groups.

HTML Structure

<monster-filter></monster-filter>

JavaScript Initialization

const element = document.createElement('monster-filter');
document.body.appendChild(element);

Exported

Filter

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

labels

object

undefined

Label definitions

labels.search

string

undefined

Search button label

labels.reset

string

undefined

Reset button label

labels.save

string

undefined

Save button label

labels.filter-name

string

undefined

Filter name label

labels.empty-query-and-no-default

string

undefined

Empty query and no default query label

labels.query-not-changed

string

undefined

Query not changed label

formatter

object

undefined

Formatter definitions

formatter.marker

object

undefined

Marker definitions

formatter.marker.open

object

Marker open

formatter.marker.close

object

Marker close

features

object

Feature definitions

features.storedConfig 3.97.0

boolean

false

Stored configuration, this replaces the setting `storedConfig.enabled`

features.autoFilter 3.100.0

boolean

true

Auto filter

features.preventSameQuery 3.103.0

boolean

false

Prevent same query

storedConfig

object

Stored configuration

storedConfig.enabled 20250101

boolean

true

The store has been enabled, this option will no longer have any effect.

storedConfig.selector

string

Selector

timeouts

object

Timeout definitions

timeouts.message

number

4000

Message timeout

queries

object

Query definitions

queries.wrap

function

undefined

Wrap callback

queries.join

function

undefined

Join callback

query

string

Query

defaultQuery

string

Default query

eventProcessing

boolean

true

Event processing

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Constructor

constructor()

Behavioral methods

resetFailureMessage()

Returns

{Filter}

showFailureMessage(message)

Parameters

message {string}: message

Returns

{Filter}

showSuccess()

Returns

{Filter}

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{FilterButton}

Events

monster-filter-initialized

connectedCallback()

disconnectedCallback()

Events

The component emits the following events:

monster-filter-initialized

For more information on how to handle events, see the mdn documentation.

The current width of the area is too small to display the content correctly.