Datatable Filter
The <monster-datatable-status>
HTML control is used to display the status of a datasource.
The status can display the loading state and the error state. The loading state is displayed
when the datasource is request data. The error state is displayed when the datasource has an error.
Usage
The <monster-datatable-status>
HTML control is used to display the status of a datasource.
It should be placed inside the <monster-datatable>
HTML control.
<div slot="bar" class="monster-button-group">
<monster-datasource-status
data-monster-option-datasource-selector="#data1"></monster-datasource-status>
<monster-embedded-pagination
data-monster-datasource-selector="#data1"></monster-embedded-pagination>
<monster-datatable-filter-button data-monster-reference="#my-collapse"
data-monster-role="filter-button">Filter
</monster-datatable-filter-button>
</div>
</div>
</div>
The data-monster-option-datasource-selector
attribute is used to set the datasource.
The value of the attribute is a CSS selector. The selector must point to a Monster
Datasource HTML control.
Internationalization
The error status can be translated into different languages. Therefore, the monster-datatable-status' component component implements the i18n transformer. For example, if you have the following status:
Failed to fetch`, which is
usually thrown by the in the datasource, you can add a translation by adding the following code to your HTML file.
<script type="application/json" data-monster-role="translations">
{
"Failed to fetch": "This is an error message"
}
</script>