DataTable

This is a simple and empty datatable. It is a powerful and flexible tool for displaying data in a tabular format. The Monster Datatable is designed to be straightforward to use and highly customizable, making it suitable for a wide range of applications.

In this example, the data is set using JavaScript. To do this, the data option is set. The columns are defined in the html using the template.

In this example, the data is set using JavaScript. The class `end` is used to align the content to the right, center to the center, and start to the left. So that the content is aligned correctly.

The data-monster-align attribute is used to align the header of the column. The values end, center, and start are used to align the header to the right, center, and left, respectively.

The data-monster-row-mode attribute allows you to set the row mode. The default value is visible. Possible values are: visible, hidden, and fixed. Using visible displays the row normally. With hidden, the row is hidden, but the data remains in the DOM, so it can be made visible again through settings or via JavaScript. The fixed option is a special setting that not only makes the row visible but also fixes it in place. It cannot be hidden and remains visible at all times.

The data-monster-grid-template attribute allows you to define the width of individual columns. As shown in the example, a column can be made wider or narrower.

Any valid CSS values can be used for the data-monster-grid-template attribute. For more information, please refer to the CSS specification.

In this example, we explain the different CSS classes that can be applied to table columns within shadow roots. Since these columns are within the shadow DOM, they can only use internally defined classes. The following classes provide various text and layout handling options.

• monospace Defines a monospace font, ideal for displaying numbers or IDs that need to be easily compared across rows.

• ellipsis This class is designed to prevent long text from disrupting the layout. When applied, the text is truncated with an ellipsis if it overflows the cell width, keeping the table row height fixed and preventing the table from becoming too tall.

• wrap Enables word wrapping within the cell. When the text reaches the cell boundary, it wraps to the next line, integrating neatly into the layout without overflow.

• auto Unlike ellipsis, this class prevents text from being truncated. Instead, it adds a horizontal scroll bar for text that exceeds the cell width, allowing users to scroll to view the full content.

• visible Typically used with components like monster-button-bar that may include pop-ups. Applying this class ensures that the pop-up remains visible when it appears.

• center, end, start These alignment classes were discussed in a previous example but are included here for completeness. They control the horizontal alignment of content within the cell: center aligns content in the center, end aligns it to the right, and start aligns it to the left.

In this example, we introduce the concept of a DataSource in Monster. A DataSource is an object that can hold a data structure, making it versatile for managing data within components. Here, we demonstrate a basic example using a DOM-based DataSource.

In this simple setup, data is embedded as JSON within the DOM, specifically in a <script> tag. In real-world scenarios, however, data typically originates from an API through a REST interface. This means that switching the DataSource from a DOM-based source to an API-based source is straightforward and requires minimal adjustments to the setup—without any changes to the structure of the table itself.

To link a DataSource to a DataTable in Monster, use the data-monster-datasource-selector attribute. This attribute points to the id of the element containing the JSON data within the DOM.

In this example, the data-monster-datasource-selector attribute on the DataTable points to #myDataSourceID, which contains the JSON data embedded in the DOM.

By changing the DataSource to point to a REST API instead of a JSON script tag, the DataTable will be populated with data from the external source, while the internal structure and bindings remain unaffected. This makes Monster a flexible tool for integrating data dynamically, suitable for a range of applications from simple to complex.

In this example, we introduce pagination to a DataTable in Monster. Like the DataTable, the pagination component also needs to connect to the same DataSource to ensure synchronized data management across both components.

To link both the DataTable and pagination to the DataSource, use the data-monster-datasource-selector attribute. This attribute should be specified on both the DataTable and pagination elements, pointing to the same DataSource id.

In this example, we enhance the DataTable in Monster by adding a filter. A filter allows users to search for specific values within the data source, refining the displayed data based on the criteria entered.

To enable filtering in the DataTable, the filter component, DataTable, and pagination must all be connected to the same DataSource. This is achieved by specifying the data-monster-datasource-selector attribute on each component, ensuring they work seamlessly together.

This setup ensures that the filter, table, and pagination components remain in sync. When a user enters text into the filter field, the displayed data in the DataTable and the pagination are both updated to match the filtered results. This configuration makes it easy to manage and display refined data dynamically within Monster.

To enable sorting for individual columns, the attribute data-monster-sortable with the desired field name must be set in the template for the desired column. In this example, the columns id, full_name, country, and username are sortable.

Your individual sorting preferences will then, in the case of a REST data source, be appended to the URL. For example, the URL will look like this:

/example?limit=5&page=${page}&orderBy=${order}

The structure of the query string can be modified using the data-monster-order-template attribute in the respective column in the row template. The default value is ${field} ${direction}. Multiple sorting parameters are separated by commas. The comma delimiter can be changed using the data-monster-datasource-orderdelimiter attribute in the monster-datatable tag.

This example demonstrates how to implement row selection in a datatable. It is recommended to ensure the selection column remains visible and has a restricted width, though this is optional.

When a user selects a row, an event is triggered that can be listened to and handled as needed. Among the available events, the most relevant is the generic monster-datatable-selection-changed.

To perform actions on selected rows, a button can be displayed once a selection is made. The selected rows can be retrieved using the getSelectedRows() method, which returns their indices. These indices can then be used to fetch the corresponding data from the datasource.

To automatically show and hide the action buttons, the attribute data-monster-role="row-action-button" must be set. To prevent layout issues, the enclosing container should have the CSS class monster-button-group.