Datatable

The datatable component is a component that allows you to display data in a table. The datatable is build with the css grid system and is therefore very flexible.

Installation

To install the Monster-Datatable custom control, run the following command:

Usage

pnpm i @schukai/monster

Registering the Control

To register the control, import the datatable.mjs file:

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

This will create an empty datatable without any columns or data.

Adding Columns

To add columns, insert a template with an ID:

<monster-datatable>
    <template id="this-is-a-row-id">
        <div data-monster-mode="fixed" data-monster-sortable="oid" data-monster-head="OID">
            <a data-monster-attributes="href path:this-is-a-row-id.oid | tostring | prefix:#"
               data-monster-replace="path:this-is-a-row-id.oid | tostring">Link</a>
        </div>
        <div>
            <button data-monster-replace="static:doit">Click</button>
        </div>
    </template>
</monster-datatable>

• The top-level div elements in the template define the columns.
• The template’s ID must be used in the path: attribute.

Header Attributes

• data-monster-mode="fixed": Specifies that the column cannot be removed or hidden.
• data-monster-attributes="href path:this-is-a-row-id.oid | tostring | prefix:#": Adds an href attribute to the element with the value from this-is-a-row-id.oid. The value is passed through the pipe | to tostring and converted to a string. Then, the prefix # is added.
• data-monster-replace: Replaces the child nodes of an element with the value from the specified path.
• data-monster-sortable="number": Indicates that the column is sortable by the number property. You can add asc or desc as a second parameter. This allows you to preset a specific sort order.
• data-monster-head="Number": Sets the header for the column to the specified name (e.g., “Number”).

Control Options

The Monster-Datatable control accepts various options in the form of a JSON object:

{
  "templates": {
    "main": getTemplate(),
            "emptyState": getEmptyTemplate()
  },
  "datasource": {
    "selector": null
  },
  "mapping": {
    "data": "dataset"
  },
  "data": [],
          "headers": [],
          "responsive": {
    "breakpoint": 800
  },
  "labels": {
    "theListContainsNoEntries": "The list contains no entries"
  },
  "features": {
    "settings": true,
            "footer": true
  },
  "templateMapping": {
    "row-key": null,
            "filter-id": null
  }
}

Here is a description of each option:

• templates: An object that specifies the main template and the empty state template.

  • main: The main template for the datatable, usually provided by a function such as getTemplate().
  • emptyState: The template to display when the datatable has no data, usually provided by a function such as getEmptyTemplate().

• datasource: An object that defines the datasource for the datatable.

  • selector: The selector for the datasource, set to null by default.

• mapping: An object that maps the datatable properties.

  • data: Maps the property name for the dataset, default is “dataset”.

• data: An array of data objects for the datatable.

• headers: An array of header objects for the datatable.

• responsive: An object that defines responsive behavior for the datatable.

  • breakpoint: The pixel width at which the datatable switches to responsive mode, default is 800.

• labels: An object that defines labels for the datatable.

  • theListContainsNoEntries: The label to display when the datatable has no data, default is “The list contains no entries”.

• features: An object that enables or disables certain datatable features.

  • settings: Enables or disables the settings feature, default is true.
  • footer: Enables or disables the footer feature, default is true.

• templateMapping: An object that defines template mapping properties.

  • row-key: The row key mapping, set to null by default.
  • filter-id: The filter ID mapping, set to null by default.

You can also add a footer to the Monster-Datatable by including a div element with a slot=“footer” attribute. Here’s the updated section of the guide:

Adding a Footer

To add a footer to the Monster-Datatable, insert a div element with the slot=“footer” attribute and the desired content:

<div slot="footer" class="monster-button-group">
    <monster-button>Aktion 1</monster-button>
    <monster-button>Aktion 2</monster-button>
    <monster-button>Aktion 3</monster-button>
</div>

This example creates a footer with a button group containing three buttons labeled “Aktion 1”, “Aktion 2”, and “Aktion 3”. Customize the footer content as needed for your specific use case.

Adding a Pagination Control

To add a pagination control to the Monster-Datatable, insert a div element with the slot=“bar” attribute and a monster-embedded-pagination element:

<div slot="bar" class="monster-button-group">
  <monster-embedded-pagination
          data-monster-datasource-selector="#data1"></monster-embedded-pagination>
</div>

This example adds a pagination control that uses a datasource selector with the ID data1. Customize the datasource selector and other attributes as needed for your specific use case.

Adding a Filter Button and Filter Area

To add a filter button and a filter area to the Monster-Datatable, insert a monster-datatable-filter-button element within the div element with the slot="bar" attribute:

<div slot="bar" class="monster-button-group">
    <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>

This filter button opens a section that contains a filter when clicked. Define the filter area using a monster-collapse element with the appropriate ID and a data-monster-role=“filter-collapse” attribute:

<monster-collapse id="my-collapse" data-monster-role="filter-collapse">
  <div class="flex">
    <monster-datatable-filter id="listfilter1" slot="filter">
      <label data-monster-label="OID" data-monster-template="${value | call:range:oid}" style="display:none">OID <input name="value" type="text"></label>
    </monster-datatable-filter>
  </div>
</monster-collapse>

This example creates a filter area with an input field for filtering by “OID”. Customize the filter area and other attributes as needed for your specific use case.

Adding Data

The datatable component needs a datasource to get the data that should be displayed in the table. The datasource can be configured via the data-monster-datasource-selector attribute. The value of the attribute is a css selector that points to the datasource component.

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

Overview

Columns

The columns of the datatable are defined via a template element. The template element must have the id attribute with the value row.

Every column is defined via a div element. The div element can configure the following attributes:

The headlines of the table are defined via the data-monster-head attribute. The value of the attribute is a json

<div data-monster-head="ID"></div>

The columns of the data table can be localized. For this purpose, the prefix i18n: must be specified in the title attributes data-monster-head.

<div data-monster-head="i18n:myKey"></div>

The alignment of the column is defined via the data-monster-align attribute. The value of the attribute is a css.

<div data-monster-align="center"></div>

When a column is sortable, the data-monster-sortable attribute must be set. The value of the attribute is the name of the column in the datasource.

<div data-monster-sortable="id"></div>

The mode of the datatable can be set via the data-monster-mode attribute. The value of the attribute is a string that can be fixed, visible or hidden. The default value is visible.

<div data-monster-mode="fixed"></div>

Fixed means that the column is always visible. Visible means that the column is visible as long as nothing else has been configured. Hidden means that the column is hidden as long as nothing else has been configured.

The visibility of the columns can be specified when defining the table. The user can show and hide all non-fixed columns.

The settings can be stored in the client if a monster-host component is available on the page.

The data is stored in the indexedDB. Additionally, the datatable needs an ID. This is set via the attribute ‘id’.

<monster-datatable id="my-table"></monster-datatable>

The localization is done via the i18n functions of the monster library.

<div style="overflow:visible">

For columns that open a popup monster-message-state-button, for example, the button must be embedded in a container with overflow:visible.

Overview

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.

#select1::part(popper) {
    background-color: white;
}

The individual parts are shown in the following picture.