Datatable Filter

The <monster-datatable-filter> HTML control is used to define filters for a data table. Within the control, you can create one or more labels, each representing a filter. These labels must be placed inside the control and can include any HTML controls.

Here is an example of a <monster-datatable-filter> control:

<monster-datatable-filter  id="my-filter" slot="filter">
    <label data-monster-label="OID" 
           data-monster-template="${value | call:range:oid}" style="display:none">
      OID <input name="value" type="search"></label>

This defines a filter that can be used to filter data by OID. The filter is hidden by default, but can be selected from the dropdown menu in the data table. The following image shows the filter.

Defining Filter Names

The data-monster-label attribute is used to specify the name of the filter as it will appear in the dropdown menu where users can select filters. In the example above, the data-monster-label attribute is set to “OID”.

Creating Query Parts with Data-Monster-Template

The data-monster-template attribute is used to define how the key and input value are combined to create a query part. For example, using data-monster-template="oid=${value}" and entering the value 1425 would result in the query oid=1425.

In the example provided, the data-monster-template attribute is set to "${value | call:range:oid}", which calculates a range. If a user enters “1425-1430”, the resulting query would be oid>=1425 AND oid<=1430.

This expression takes the input range and converts it into a query that includes both the lower and upper bounds of the range.

Hiding the Filter by Default

The style="display:none" attribute is used to hide the filter initially. This ensures that the filter is not visible until the user selects it from the dropdown menu.

Positioning the Filter in the Data Table

To position the filter within the filter area of the data table, you can include the slot="filter" attribute. This attribute ensures that the filter is displayed in the correct location within the data table.


The select control can be customized to your own needs. For this purpose, the control can be designed via css.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.