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>
</monster-datatable-filter>
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.
Layout
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.