Container (`ComponentContainer`)

layout.registerComponentFactoryFunction('dashboard', (container, state) => {
  // 1. Direct DOM Element Access (Native HTMLElement)
  container.element.innerHTML = `<div class="dashboard-root"><h3>${state?.title || 'Dashboard'}</h3></div>`;

  // 2. State Retrieval & Persistence Callback
  container.stateRequestEvent = () => {
    return { title: 'Updated Dashboard Title', scrollPos: 120 };
  };

  // 3. Container Lifecycle Listeners
  container.on('resize', () => {
    console.log(`Resized to ${container.width}x${container.height}`);
  });

  container.on('destroy', () => {
    // Unmount or clean up third-party charts or sub-components
  });
});

Properties

element

The native HTMLElement backing this container in the DOM. Append sub-elements or mount virtual portals into this node directly.

initialState

The initial SerializableValue passed via componentState in the item configuration or retrieved from a loaded layout.

state

The current serialized state of the component (evaluated via container.stateRequestEvent()).

title

The current title of the container, reflected on its associated tab.

width

The current inner width of the container in pixels.

height

The current inner height of the container in pixels.

componentType

The registered type name identifying this component.

component

The instantiated component object (if created via a component constructor class).

parent

A reference to the owning ComponentItem tree node.

tab

A reference to the active Tab control controlling this container.

layoutManager

A reference to the owning StrelitLayout layout manager instance.

isHidden

True if this container is currently inactive or hidden behind another tab in its stack.

visible

True if the container is currently visible in the DOM.

virtual

True if this component operates in virtual layout mode.

Events

open

Emitted after the container is sized and inserted into the active document DOM tree.

resize

Emitted whenever the container dimensions change due to user drag or window resizing.

show

Emitted when the tab becomes active and the container is made visible.

hide

Emitted when another tab in the stack becomes active and this container is hidden.

focus

Emitted when the component container receives focus.

blur

Emitted when the component container loses focus.

tab

Emitted when a tab control is bound to this container.

destroy

Emitted immediately before the container and its DOM element are removed from the layout. Always use this hook to clean up event listeners, timers, and framework components.

close

Emitted when the close button for this container is triggered.

stateRequestEvent

Assign a callback function to container.stateRequestEvent to serialize the component's current dynamic state when layout.saveLayout() is called.

container.stateRequestEvent = () => {
  return {
    selectedIds: myGrid.getSelectedRowIds(),
    filterQuery: searchInput.value
  };
};

replaceComponent( itemConfig )

argument	type	optional	default	description
itemConfig	ComponentItemConfig	false	-	New component configuration (with new componentType, title, componentState).

Replaces the component currently hosted inside this container with a different component in-place, without modifying the layout tree.

focus( suppressEvent? ) / blur( suppressEvent? )

Sets or clears focus on this container and its parent component item.

setTitle( title )

argument	type	optional	default	description
title	string	false	-	The new title string to apply to the container and its tab.

close()

Programmatically closes this container and removes its component from the layout tree.