Datatable Example

The following example shows how to use the datatable component to display data from a REST API.

The rest api is a Monster component that allows you to make REST calls to a REST API.

<script id="id-for-this-config" type="application/json">
    {
        "read": {
            "url": "https://example.com/api/commerce/orders/search?page=${page}",
            "init": {
                "method": "GET",
                "headers": {
                    "Authorization": "Basic secret",
                    "Accept": "application/json"
                }
            },
            "credentials": "include"
        }
    }

</script>
<monster-datasource-rest id="data1" 
                         data-monster-options-selector="#id-for-this-config">
    
</monster-datasource-rest>

After the datasource is configured, the datatable can be configured. The reference to the datasource is made via the data-monster-datasource-selector attribute.

The headlines of the table are defined via the data-monster-head attribute. If no value is defined, the number of the column is used as the headline.

The grid template width is defined via the data-monster-grid-template attribute. The default value is 1fr.

With the data-monster-align attribute, the alignment of the content can be defined. Values are start, center and end. Additionally, the alignment should be defined in the CSS class for the column.

<monster-datatable data-monster-datasource-selector="#data1">
    <template id="row">
        <div data-monster-head="OID" 
             data-monster-grid-template="1fr"
             data-monster-replace="path:row.oid | tostring | 
             prefix:<a href=/> | suffix:</a>"></div>
        <div data-monster-head="ERP" 
             data-monster-replace="path:row.erpCreation"></div>
        <div class="center" data-monster-align="center" 
             data-monster-replace="path:row.orderState"></div>
        <div class="end" data-monster-align="end"
             data-monster-replace="path:row.orderState | tostring 
                       | prefix:<span class=monster-badge-secondary-pill>|
                       suffix:</span>"></div>
        <div data-monster-replace="path:row.orderState"></div>
        <div data-monster-replace="static:this is a static value"></div>
    </template>
</monster-datatable>

If you want to use the i18n component, you can define the translations in a script tag with the data-monster-role attribute.

<script type="application/json" data-monster-role="translations">
    {
        "head1": "Headline 1",
        "head2": "Headline 2",
    }

</script>

In the html template, the data-monster-head attribute is used to define the location of the headline.

<template id="row">
    <div data-monster-head="i18n:head1"></div>
    <div data-monster-head="i18n:head2"></div>
</template>

And now the datatable is ready to use. The pagination can be used to load more data. The reference to the datasource is made via the data-monster-datasource-selector attribute.

<monster-pagination data-monster-datasource-selector="#data1"></monster-pagination>

You also need to include the javascript and css files for the datatable component.

import "@schukai/monster/source/components/datatable/datasource/rest.mjs";
import "@schukai/monster/source/components/datatable/pagination.mjs";
import "@schukai/monster/source/components/datatable/datatable.mjs";

The datatable component uses the following css classes.

import "@schukai/monster/source/components/style/style/color.pcss";
import "@schukai/monster/source/components/style/style/theme.pcss";
import "@schukai/monster/source/components/style/style/table.pcss";
import "@schukai/monster/source/components/style/style/property.pcss";
import "@schukai/monster/source/components/style/style/badge.pcss";
import "@schukai/monster/source/components/style/style/link.pcss";
import "@schukai/monster/source/components/style/style/data-grid.pcss";
import "@schukai/monster/source/components/style/style/property.pcss";