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";