ColumnBar

Introduction

The Monster Datatable web component is a powerful and flexible tool for displaying data in a tabular format. It is designed to be user-friendly and highly customizable, making it suitable for a wide range of applications.

Key Features

• Dynamic Interaction: Allows users to interact with content dynamically, making the web experience more intuitive and user-focused.
• Customizable Appearance: Enables customization of the table’s appearance to align with the visual style of your brand or application, ensuring a consistent look and feel.
• Accessibility: Built with accessibility in mind, ensuring a seamless experience for all users.
• Programmatic Control: Offers methods like click, focus, and blur to programmatically control the table’s behavior, giving developers enhanced flexibility.

Enhancing the User Experience

The Monster Datatable enhances user experience by providing a more intuitive and interactive way to display data. It allows users to interact dynamically with content, making the web experience more engaging and user-centered.

Getting Started

Let's begin with a simple example to demonstrate the functionality of the Monster Datatable.

A Basic Example

First, add the Monster Datatable element to your HTML document:

<monster-datatable></monster-datatable>

Now, define the template for each column by using the <template> element within the Monster Datatable element. Each <div> within the template represents a column.

<monster-datatable>
    <template id="row">
        <div data-monster-head="id" data-monster-replace="path:row.id"></div>
        <div data-monster-head="name" data-monster-replace="path:row.name"></div>
    </template>
</monster-datatable>

In this setup, the <div> elements in the template have the data-monster-head attribute, which specifies the column header. The data-monster-replace attribute defines the column value, with values sourced from the row object passed to the template.

You can also configure the key for the row object using the templateMapping.row-key option. If not configured, the default key row is used.

Next, you can add data to the table using JavaScript. The simplest way to do this is by setting data through the setOption method:

const datatable = document.querySelector('monster-datatable');
datatable.setOption('data', [
    { "id": "1", "name": "John Doe" },
    { "id": "2", "name": "John Smith" },
    { "id": "3", "name": "Max Mustermann" }
]);

Using a Data Source

Alternatively, you can use a data source to populate the table with data.

<monster-datasource-dom></monster-datasource-dom>

Add the data to be displayed in the table within this data source element. The data source element must have a unique selector, allowing the Monster Datatable element to identify which data source to use. In the simplest case, you can assign an ID to the element, which acts as a selector.

By default, the DataTable looks for the key "dataset" in the data source as the data provider for the table, but this can be configured using the mapping.data option.

<monster-datasource-dom id="myDataSourceID">
    <script type="application/json">
        {
            "dataset": [
                { "id": 1, "name": "John Doe" },
                { "id": 2, "name": "Jane Doe" },
                { "id": 3, "name": "Max Mustermann" }
            ]
        }
    </script>
</monster-datasource-dom>

Now, specify the data source for the Monster Datatable by using the data-monster-datasource-selector attribute.

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

As with the basic example, the table is now fully functional. Data is loaded from the data source into the table. For more complex cases, such as data from a REST API, additional configuration options are available.

Further examples can be found in the Usage tab.

HTML Structure

<monster-column-bar></monster-column-bar>

JavaScript Initialization

const element = document.createElement('monster-column-bar');
document.body.appendChild(element);

Exported

ColumnBar

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

• since
• deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

• data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
• data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Static methods

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

Other methods

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.