Navigation Back to home

ColumnBar

The ColumnBar component is used to show and configure the columns of a datatable.

Import
the javascript logo
import { ColumnBar } from "@schukai/monster/source/components/datatable/columnbar.mjs";
Source
the git logo
Package
the npm logo
Since
1.0.0

Introduction

The Monster Datatable is the main data grid component for dataset views with filtering, sorting, pagination and row actions. Use it when users need to inspect, compare and work with structured records instead of reading a simple static table.

When to use Datatable

  • Use it for operational data views: Lists of orders, users, products or logs benefit from the built-in grid behavior and row actions.
  • Use it when data comes from a datasource: The component integrates well with DOM, REST and other Monster datasource patterns.
  • Use it when users need control over the result set: Pagination, filtering, sorting and row selection are first-class workflows.
  • Do not use it for short static comparisons: If the content is editorial and not interactive, a plain HTML table is often easier and faster.

Key Features

  • Datasource integration: Fill the grid from inline data or from a dedicated datasource without rewriting the table template.
  • Operational controls: Combine filtering, ordering, pagination and selection to support day-to-day backoffice workflows.
  • Template-driven rows: Define columns and row content with Monster templates instead of custom rendering code.
  • Row events and state changes: Listen to documented selection and row mutation events for follow-up UI logic.

Typical mistakes

Start with a clear row template and a stable data contract. Many Datatable problems come from mixing presentation, filtering and datasource concerns too early. If the user only needs a handful of read-only values, a simpler table or metric component usually communicates the information better.

Empty

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.

Javascript

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

HTML

<monster-datatable>
</monster-datatable>

Stylesheet

/** no additional stylesheet is defined **/
Open in playground

Component Design

This component is built using the Shadow DOM, which allows it to encapsulate its internal structure and styling. By using a shadow root, the component's internal elements are isolated from the rest of the webpage, ensuring that external styles or scripts cannot accidentally modify its internal layout or behavior.

Shadow DOM and Accessibility

Since the component is encapsulated within a shadow root, direct access to its internal elements is restricted. This means that developers cannot manipulate or style these elements from outside the component. The Shadow DOM helps maintain consistency in the design and behavior of the component by preventing external interference.

Customizing Through Exported Parts

While the Shadow DOM restricts direct access to the component's internal structure, customization is still possible through exported parts. Specific parts of the component are made accessible for styling by being explicitly marked for export. These exported parts can be targeted and customized using CSS, allowing you to modify the appearance of the component without compromising its encapsulation.

Available Part Attributes

  • control: This part represents the entire control area of the slider, including navigation buttons and thumbnails. Use this to style the general layout and background of the control panel.

Below is an example of how to use CSS part attributes to customize different parts of the Control.


monster-button::part(control) {
    background-color: #f0f0f0;
    padding: 10px;
}

Explanation of the Example

  • monster-button::part(control): Styles the entire control panel, giving it a light background color and some padding.

Accessibility

Accessibility is a key consideration in the design of this component. By following best practices for web accessibility, the component ensures that users of all abilities can interact with it effectively. This includes support for keyboard navigation, screen readers, and other assistive technologies to provide an inclusive user experience.

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.

Option
Type
Default
Description
templates
object
Template definitions
templates.main
string
undefined
Main template
labels
object
undefined
Locale definitions
locale.settings
string
undefined
The text for the settings button
dots
object
Dots configuration
dots.maxVisible
number
15
Max dots to show (0 disables limit)

  • 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

[instanceSymbol]()
Returns
  • {symbol}
This method is called by the instanceof operator.
getCSSStyleSheet()
Returns
  • {CSSStyleSheet[]}
getTag()
Returns
  • {string}

Lifecycle methods

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

[assembleMethodSymbol]()
Returns
  • {void}
connectedCallback()4.14.0
Returns
  • {void}
Called every time the element is added to the DOM. Useful for running initialization code.
disconnectedCallback()4.14.0
Returns
  • {void}
Called every time the element is removed from the DOM. Useful for running clean up code.

Other methods

customization()
This method is called to customize the component.

Events

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

The current width of the area is too small to display the content correctly.