Info group

An info group visualizes properties by combining an icon and a short text.

An info group (<dt-info-group>) is used to show data in a simple way. It's a visual container for combining an icon with two lines of text (title and content). It often comes with multiple instances of itself to give a quick overview and summarize content, e.g. inside a table cell.

´ Loading interactive demo...
<dt-info-group> <dt-info-group-icon><dt-icon name="agent"></dt-icon></dt-info-group-icon> <dt-info-group-title>5 min 30 s</dt-info-group-title> Session duration </dt-info-group> export class InfoGroupDefaultExample {} <dt-info-group> <dt-info-group-icon><dt-icon name="agent"></dt-icon></dt-info-group-icon> <dt-info-group-title>5 min 30 s</dt-info-group-title> Session duration </dt-info-group> export class InfoGroupDefaultExample {}

The textual content could be a link, otherwise the info group has no interactivity. The color of the icon is themeable. The width is defined by the space that is left.

Imports

You have to import the DtInfoGroupModule when you want to use the <dt-info-group>:

@NgModule({
  imports: [DtInfoGroupModule],
})
class MyModule {}

Basic setup

In addition to the custom content, the info-group can also hold some special sections (directives):

  • <dt-info-group-title> - The title of this info group.
  • <dt-info-group-content> - The text right below the title.
  • <dt-info-group-icon> - The icon on the left of the info group is themeable.

Info groups in use

Info groups in cards

An info group can be used in a card and on the top of a page to show properties.

info-group-grid

Info groups in tables

Info groups are also used in the first column of a table or in a list. They can provide additional information without the use of a second column. A column with info groups is always sorted by the data in the first line.

´ Loading interactive demo...
<dt-table [dataSource]="dataSource"> <ng-container dtColumnDef="service"> <dt-header-cell *dtHeaderCellDef>Service</dt-header-cell> <dt-cell *dtCellDef="let row"> <dt-info-group> <dt-info-group-icon> <dt-icon name="services"></dt-icon> </dt-info-group-icon> <dt-info-group-title>{{ row.service }}</dt-info-group-title> {{ row.location }} </dt-info-group> </dt-cell> </ng-container> <ng-container dtColumnDef="responseTime" dtColumnAlign="right"> <dt-header-cell *dtHeaderCellDef>Response time</dt-header-cell> <dt-cell *dtCellDef="let row"> {{ row.responseTime | dtCount }} ms </dt-cell> </ng-container> <ng-container dtColumnDef="failureRate" dtColumnAlign="right"> <dt-header-cell *dtHeaderCellDef>Failure rate</dt-header-cell> <dt-cell *dtCellDef="let row"> {{ row.failureRate | dtPercent }} </dt-cell> </ng-container> <dt-header-row *dtHeaderRowDef="['service', 'responseTime', 'failureRate']" ></dt-header-row> <dt-row *dtRowDef="let row; columns: ['service', 'responseTime', 'failureRate']" ></dt-row> </dt-table> export class TableWithInfoGroupCellExample { dataSource: object[] = [ { service: 'BookingService', location: 'ruxit-dev-us-east-BB', responseTime: 72, failureRate: 0, }, { service: 'EasyTravelWebserver:8079', location: 'ruxti-dev-us-east-THIRD', responseTime: 71.3, failureRate: 0.9, }, { service: 'easyTRavelBusiness', location: 'gn-rx-ub12-cl04v.clients.emeea.cpwr.corp', responseTime: 66.2, failureRate: 0.1, }, { service: 'easyTravel', location: 'L-W864-APMDay3', responseTime: 44, failureRate: 0, }, ]; } <dt-table [dataSource]="dataSource"> <ng-container dtColumnDef="service"> <dt-header-cell *dtHeaderCellDef>Service</dt-header-cell> <dt-cell *dtCellDef="let row"> <dt-info-group> <dt-info-group-icon> <dt-icon name="services"></dt-icon> </dt-info-group-icon> <dt-info-group-title>{{ row.service }}</dt-info-group-title> {{ row.location }} </dt-info-group> </dt-cell> </ng-container> <ng-container dtColumnDef="responseTime" dtColumnAlign="right"> <dt-header-cell *dtHeaderCellDef>Response time</dt-header-cell> <dt-cell *dtCellDef="let row"> {{ row.responseTime | dtCount }} ms </dt-cell> </ng-container> <ng-container dtColumnDef="failureRate" dtColumnAlign="right"> <dt-header-cell *dtHeaderCellDef>Failure rate</dt-header-cell> <dt-cell *dtCellDef="let row"> {{ row.failureRate | dtPercent }} </dt-cell> </ng-container> <dt-header-row *dtHeaderRowDef="['service', 'responseTime', 'failureRate']" ></dt-header-row> <dt-row *dtRowDef="let row; columns: ['service', 'responseTime', 'failureRate']" ></dt-row> </dt-table> export class TableWithInfoGroupCellExample { dataSource: object[] = [ { service: 'BookingService', location: 'ruxit-dev-us-east-BB', responseTime: 72, failureRate: 0, }, { service: 'EasyTravelWebserver:8079', location: 'ruxti-dev-us-east-THIRD', responseTime: 71.3, failureRate: 0.9, }, { service: 'easyTRavelBusiness', location: 'gn-rx-ub12-cl04v.clients.emeea.cpwr.corp', responseTime: 66.2, failureRate: 0.1, }, { service: 'easyTravel', location: 'L-W864-APMDay3', responseTime: 44, failureRate: 0, }, ]; }
´ Loading interactive demo...
<dt-tree-table [dataSource]="dataSource" [treeControl]="treeControl"> <ng-container dtColumnDef="name"> <dt-tree-table-header-cell *dtHeaderCellDef> Name </dt-tree-table-header-cell> <dt-tree-table-toggle-cell *dtCellDef="let row"> <dt-info-group> <dt-info-group-icon> <dt-icon [name]="row.icon"></dt-icon> </dt-info-group-icon> <dt-info-group-title>{{ row.name }}</dt-info-group-title> {{ row.threadlevel }} </dt-info-group> </dt-tree-table-toggle-cell> </ng-container> <ng-container dtColumnDef="total"> <dt-tree-table-header-cell *dtHeaderCellDef> Total time consumption </dt-tree-table-header-cell> <dt-cell *dtCellDef="let row"> <dt-progress-bar class="thread-progress" [value]="row.blocked" [max]="row.totalTimeConsumption" ></dt-progress-bar> <dt-progress-bar class="thread-progress" [value]="row.waiting" [max]="row.totalTimeConsumption" ></dt-progress-bar> <dt-progress-bar class="thread-progress" [value]="row.running" [max]="row.totalTimeConsumption" ></dt-progress-bar> </dt-cell> </ng-container> <ng-container dtColumnDef="blocked" dtColumnAlign="right"> <dt-tree-table-header-cell *dtHeaderCellDef> Blocked </dt-tree-table-header-cell> <dt-cell *dtCellDef="let row">{{ row.blocked }}ms</dt-cell> </ng-container> <ng-container dtColumnDef="running" dtColumnAlign="center"> <dt-tree-table-header-cell *dtHeaderCellDef> Running </dt-tree-table-header-cell> <dt-cell *dtCellDef="let row">{{ row.running }}ms</dt-cell> </ng-container> <ng-container dtColumnDef="waiting"> <dt-tree-table-header-cell *dtHeaderCellDef> Waiting </dt-tree-table-header-cell> <dt-cell *dtCellDef="let row">{{ row.waiting }}ms</dt-cell> </ng-container> <ng-container dtColumnDef="actions"> <dt-tree-table-header-cell *dtHeaderCellDef> Actions </dt-tree-table-header-cell> <dt-cell *dtCellDef="let row"> <button dt-icon-button variant="nested" aria-label="Filter results"> <dt-icon name="filter"></dt-icon> </button> <button dt-icon-button variant="nested" [dtContextDialogTrigger]="dialog" aria-label="Show more data" > <dt-icon name="more"></dt-icon> </button> <dt-context-dialog #dialog aria-label="Show more data" aria-label-close-button="Close context dialog" > {{ row.name }} context dialog </dt-context-dialog> </dt-cell> </ng-container> <dt-header-row *dtHeaderRowDef="[ 'name', 'total', 'blocked', 'running', 'waiting', 'actions' ]" ></dt-header-row> <dt-tree-table-row *dtRowDef=" let row; columns: ['name', 'total', 'blocked', 'running', 'waiting', 'actions'] " [data]="row" ></dt-tree-table-row> </dt-tree-table> <button dt-button (click)="treeControl.expandAll()">Expand all</button> <button dt-button (click)="treeControl.collapseAll()">Collapse all</button> export class TreeTableDefaultExample { treeControl: FlatTreeControl<ThreadFlatNode>; treeFlattener: DtTreeFlattener<ThreadNode, ThreadFlatNode>; dataSource: DtTreeDataSource<ThreadNode, ThreadFlatNode>; constructor() { this.treeControl = new DtTreeControl<ThreadFlatNode>( this._getLevel, this._isExpandable, ); this.treeFlattener = new DtTreeFlattener( this.transformer, this._getLevel, this._isExpandable, this._getChildren, ); this.dataSource = new DtTreeDataSource( this.treeControl, this.treeFlattener, ); this.dataSource.data = TESTDATA; } hasChild = (_: number, _nodeData: ThreadFlatNode) => _nodeData.expandable; transformer = (node: ThreadNode, level: number): ThreadFlatNode => { const flatNode = new ThreadFlatNode(); flatNode.name = node.name; flatNode.level = level; flatNode.threadlevel = node.threadlevel; flatNode.expandable = !!node.children; flatNode.blocked = node.blocked; flatNode.running = node.running; flatNode.waiting = node.waiting; flatNode.totalTimeConsumption = node.totalTimeConsumption; flatNode.icon = node.icon; return flatNode; }; private _getLevel = (node: ThreadFlatNode) => node.level; private _isExpandable = (node: ThreadFlatNode) => node.expandable; private _getChildren = (node: ThreadNode): ThreadNode[] => node.children || []; } <dt-tree-table [dataSource]="dataSource" [treeControl]="treeControl"> <ng-container dtColumnDef="name"> <dt-tree-table-header-cell *dtHeaderCellDef> Name </dt-tree-table-header-cell> <dt-tree-table-toggle-cell *dtCellDef="let row"> <dt-info-group> <dt-info-group-icon> <dt-icon [name]="row.icon"></dt-icon> </dt-info-group-icon> <dt-info-group-title>{{ row.name }}</dt-info-group-title> {{ row.threadlevel }} </dt-info-group> </dt-tree-table-toggle-cell> </ng-container> <ng-container dtColumnDef="total"> <dt-tree-table-header-cell *dtHeaderCellDef> Total time consumption </dt-tree-table-header-cell> <dt-cell *dtCellDef="let row"> <dt-progress-bar class="thread-progress" [value]="row.blocked" [max]="row.totalTimeConsumption" ></dt-progress-bar> <dt-progress-bar class="thread-progress" [value]="row.waiting" [max]="row.totalTimeConsumption" ></dt-progress-bar> <dt-progress-bar class="thread-progress" [value]="row.running" [max]="row.totalTimeConsumption" ></dt-progress-bar> </dt-cell> </ng-container> <ng-container dtColumnDef="blocked" dtColumnAlign="right"> <dt-tree-table-header-cell *dtHeaderCellDef> Blocked </dt-tree-table-header-cell> <dt-cell *dtCellDef="let row">{{ row.blocked }}ms</dt-cell> </ng-container> <ng-container dtColumnDef="running" dtColumnAlign="center"> <dt-tree-table-header-cell *dtHeaderCellDef> Running </dt-tree-table-header-cell> <dt-cell *dtCellDef="let row">{{ row.running }}ms</dt-cell> </ng-container> <ng-container dtColumnDef="waiting"> <dt-tree-table-header-cell *dtHeaderCellDef> Waiting </dt-tree-table-header-cell> <dt-cell *dtCellDef="let row">{{ row.waiting }}ms</dt-cell> </ng-container> <ng-container dtColumnDef="actions"> <dt-tree-table-header-cell *dtHeaderCellDef> Actions </dt-tree-table-header-cell> <dt-cell *dtCellDef="let row"> <button dt-icon-button variant="nested" aria-label="Filter results"> <dt-icon name="filter"></dt-icon> </button> <button dt-icon-button variant="nested" [dtContextDialogTrigger]="dialog" aria-label="Show more data" > <dt-icon name="more"></dt-icon> </button> <dt-context-dialog #dialog aria-label="Show more data" aria-label-close-button="Close context dialog" > {{ row.name }} context dialog </dt-context-dialog> </dt-cell> </ng-container> <dt-header-row *dtHeaderRowDef="[ 'name', 'total', 'blocked', 'running', 'waiting', 'actions' ]" ></dt-header-row> <dt-tree-table-row *dtRowDef=" let row; columns: ['name', 'total', 'blocked', 'running', 'waiting', 'actions'] " [data]="row" ></dt-tree-table-row> </dt-tree-table> <button dt-button (click)="treeControl.expandAll()">Expand all</button> <button dt-button (click)="treeControl.collapseAll()">Collapse all</button> export class TreeTableDefaultExample { treeControl: FlatTreeControl<ThreadFlatNode>; treeFlattener: DtTreeFlattener<ThreadNode, ThreadFlatNode>; dataSource: DtTreeDataSource<ThreadNode, ThreadFlatNode>; constructor() { this.treeControl = new DtTreeControl<ThreadFlatNode>( this._getLevel, this._isExpandable, ); this.treeFlattener = new DtTreeFlattener( this.transformer, this._getLevel, this._isExpandable, this._getChildren, ); this.dataSource = new DtTreeDataSource( this.treeControl, this.treeFlattener, ); this.dataSource.data = TESTDATA; } hasChild = (_: number, _nodeData: ThreadFlatNode) => _nodeData.expandable; transformer = (node: ThreadNode, level: number): ThreadFlatNode => { const flatNode = new ThreadFlatNode(); flatNode.name = node.name; flatNode.level = level; flatNode.threadlevel = node.threadlevel; flatNode.expandable = !!node.children; flatNode.blocked = node.blocked; flatNode.running = node.running; flatNode.waiting = node.waiting; flatNode.totalTimeConsumption = node.totalTimeConsumption; flatNode.icon = node.icon; return flatNode; }; private _getLevel = (node: ThreadFlatNode) => node.level; private _isExpandable = (node: ThreadFlatNode) => node.expandable; private _getChildren = (node: ThreadNode): ThreadNode[] => node.children || []; }