Widgets
Content widget components

group

4min

The group widget allows widgets to be combined to create a single widget. The group widget can be used only on sizes: 2x4, 4x2, and 4x4.

Configuration options

Core structure



children

The children property includes all available widgets- combining two widgets is typical for group widgets.

Other options



footer

Add text to the footer of the widget

footerAlign

Align the footer text to left, right, center.

placeholders

Specify a placeholder text to display if there is no data, for example - title: No data to display

split

The option to group the widgets vertically or horizontally. By default, widgets are grouped vertically.

Examples and code snippets 

Horizontal split widget group
Horizontal split widget group


For the 4x4 widget, we have a split option. In this property, a vertical or horizontal layout is possible for the widget. In this example, a combination of a chart and a list are used in a horizontal split.

Examples: See the full example using static data in GitHub.



group-ChartList (static)

Vertical split widget group
Vertical split widget group


In this example, a combination of a chart and list was configured with a vertical split.

Examples: See the full example using static data in GitHub.

group-ChartListVertical (static)

Group widget with avatar and list
Group widget with avatar and list


This group widget represents a combination of the avatar with a list. After clicking on the widget, the list component is shown.

Examples: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

Datasources: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.

group-avatar-list (static)
group-avatar-list (Dynamic)

Group with value and bar-chart
Group with value and bar-chart


This group widget represents a combination of the value and bar-chart. After clicking on the widget, the bar- chart is shown.

Examples: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

Datasources: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.

group-value-bar-chart (static)
group-value-chart (dynamic)




Updated 24 Jul 2024
Doc contributor
Did this page help you?
Yes
No