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>