carbon-components-angular
Version:
Next generation components
1,287 lines (1,135 loc) • 67 kB
HTML
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>carbon-components-angular documentation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="../images/favicon.ico">
<link rel="stylesheet" href="../styles/style.css">
<link rel="stylesheet" href="../styles/dark.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
<a href="../" class="navbar-brand">carbon-components-angular documentation</a>
<button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
</div>
<div class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
</div>
<div class="container-fluid main">
<div class="row main">
<div class="hidden-xs menu">
<compodoc-menu mode="normal"></compodoc-menu>
</div>
<!-- START CONTENT -->
<div class="content component">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Components</li>
<li class="breadcrumb-item"
>
TableHeadCell</li>
</ol>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a href="#info" class="nav-link active"
role="tab" id="info-tab" data-bs-toggle="tab" data-link="info">Info</a>
</li>
<li class="nav-item">
<a href="#source" class="nav-link"
role="tab" id="source-tab" data-bs-toggle="tab" data-link="source">Source</a>
</li>
<li class="nav-item">
<a href="#tree" class="nav-link"
role="tab" id="tree-tab" data-bs-toggle="tab" data-link="dom-tree">DOM Tree</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="info"><p class="comment">
<h3>File</h3>
</p>
<p class="comment">
<code>src/table/head/table-head-cell.component.ts</code>
</p>
<p class="comment">
<h3>Implements</h3>
</p>
<p class="comment">
<code>OnChanges</code>
</p>
<section data-compodoc="block-metadata">
<h3>Metadata</h3>
<table class="table table-sm table-hover metadata">
<tbody>
<tr>
<td class="col-md-3">selector</td>
<td class="col-md-9"><code>[cdsTableHeadCell], [ibmTableHeadCell]</code></td>
</tr>
<tr>
<td class="col-md-3">template</td>
<td class="col-md-9"><pre class="line-numbers"><code class="language-html"><button
class="cds--table-sort"
*ngIf="sortable && this.sort.observers.length > 0 && column.sortable"
[attr.aria-label]="(column.sorted && column.ascending ? getSortDescendingLabel() : getSortAscendingLabel()) | async"
aria-live="polite"
[ngClass]="{
'cds--table-sort--active': column.sorted,
'cds--table-sort--descending': column.ascending
}"
(click)="onClick()">
<span
class="cds--table-sort__flex"
[title]="column.title"
tabindex="-1">
<div *ngIf="!skeleton && !column.template" cdsTableHeadCellLabel>
{{column.data}}
</div>
<ng-template
*ngIf="!skeleton && column.template"
[ngTemplateOutlet]="column.template"
[ngTemplateOutletContext]="{data: column.data}">
</ng-template>
<svg
*ngIf="!skeleton"
focusable="false"
preserveAspectRatio="xMidYMid meet"
style="will-change: transform;"
xmlns="http://www.w3.org/2000/svg"
class="cds--table-sort__icon"
width="16"
height="16"
viewBox="0 0 16 16"
aria-hidden="true">
<path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path>
</svg>
<svg
*ngIf="!skeleton"
focusable="false"
preserveAspectRatio="xMidYMid meet"
style="will-change: transform;"
xmlns="http://www.w3.org/2000/svg"
class="cds--table-sort__icon-unsorted"
width="16"
height="16"
viewBox="0 0 16 16"
aria-hidden="true">
<path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path>
</svg>
</span>
</button>
<div
class="cds--table-header-label"
*ngIf="!skeleton && this.sort.observers.length === 0 || (this.sort.observers.length > 0 && !column.sortable) || !sortable">
<span *ngIf="!column.template" [title]="column.data">
<ng-container *ngIf="!skeleton">
{{column.data}}
</ng-container>
</span>
<ng-template
[ngTemplateOutlet]="column.template" [ngTemplateOutletContext]="{data: column.data}">
</ng-template>
</div>
</code></pre></td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-index">
<h3 id="index">Index</h3>
<table class="table table-sm table-bordered index-table">
<tbody>
<tr>
<td class="col-md-4">
<h6><b>Properties</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<span class="modifier">Protected</span>
<a href="#_filterTitle" >_filterTitle</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#_sortAscendingLabel" >_sortAscendingLabel</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#_sortDescendingLabel" >_sortDescendingLabel</a>
</li>
<li>
<span class="modifier"></span>
<a href="#theadAction" >theadAction</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Methods</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#getSortAscendingLabel" >getSortAscendingLabel</a>
</li>
<li>
<a href="#getSortDescendingLabel" >getSortDescendingLabel</a>
</li>
<li>
<a href="#ngOnChanges" >ngOnChanges</a>
</li>
<li>
<a href="#onClick" >onClick</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#sortLabelMap" >sortLabelMap</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Inputs</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#column" >column</a>
</li>
<li>
<a href="#filterTitle" >filterTitle</a>
</li>
<li>
<a href="#skeleton" >skeleton</a>
</li>
<li>
<a href="#sortable" >sortable</a>
</li>
<li>
<a href="#sortAscendingLabel" >sortAscendingLabel</a>
</li>
<li>
<a href="#sortDescendingLabel" >sortDescendingLabel</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Outputs</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#sort" >sort</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>HostBindings</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#class.thead_action" >class.thead_action</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Accessors</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#sortDescendingLabel" >sortDescendingLabel</a>
</li>
<li>
<a href="#sortAscendingLabel" >sortAscendingLabel</a>
</li>
<li>
<a href="#filterTitle" >filterTitle</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-constructor">
<h3 id="constructor">Constructor</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<code>constructor(i18n: <a href="../injectables/I18n.html" target="_self">I18n</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="125" class="link-to-prism">src/table/head/table-head-cell.component.ts:125</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div>
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>i18n</td>
<td>
<code><a href="../injectables/I18n.html" target="_self" >I18n</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-inputs">
<h3 id="inputs">Inputs</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="column"></a>
<b>column</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../classes/TableHeaderItem.html" target="_self" >TableHeaderItem</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="83" class="link-to-prism">src/table/head/table-head-cell.component.ts:83</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="filterTitle"></a>
<b>filterTitle</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | Observable</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="108" class="link-to-prism">src/table/head/table-head-cell.component.ts:108</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="skeleton"></a>
<b>skeleton</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="85" class="link-to-prism">src/table/head/table-head-cell.component.ts:85</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="sortable"></a>
<b>sortable</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>true</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="87" class="link-to-prism">src/table/head/table-head-cell.component.ts:87</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="sortAscendingLabel"></a>
<b>sortAscendingLabel</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | Observable</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="99" class="link-to-prism">src/table/head/table-head-cell.component.ts:99</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="sortDescendingLabel"></a>
<b>sortDescendingLabel</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | Observable</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="90" class="link-to-prism">src/table/head/table-head-cell.component.ts:90</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-outputs">
<h3 id="outputs">Outputs</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="sort"></a>
<b>sort</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>EventEmitter</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="119" class="link-to-prism">src/table/head/table-head-cell.component.ts:119</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Notifies that the column should be sorted</p>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-properties">
<h3>HostBindings</h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="class.thead_action"></a>
<span class="name">
<span ><b>class.thead_action</b></span>
<a href="#class.thead_action"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="121" class="link-to-prism">src/table/head/table-head-cell.component.ts:121</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-methods">
<h3 id="methods">
Methods
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getSortAscendingLabel"></a>
<span class="name">
<span ><b>getSortAscendingLabel</b></span>
<a href="#getSortAscendingLabel"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getSortAscendingLabel()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="139"
class="link-to-prism">src/table/head/table-head-cell.component.ts:139</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code>Observable<string></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getSortDescendingLabel"></a>
<span class="name">
<span ><b>getSortDescendingLabel</b></span>
<a href="#getSortDescendingLabel"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getSortDescendingLabel()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="135"
class="link-to-prism">src/table/head/table-head-cell.component.ts:135</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code>Observable<string></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ngOnChanges"></a>
<span class="name">
<span ><b>ngOnChanges</b></span>
<a href="#ngOnChanges"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ngOnChanges()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="129"
class="link-to-prism">src/table/head/table-head-cell.component.ts:129</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="onClick"></a>
<span class="name">
<span ><b>onClick</b></span>
<a href="#onClick"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>onClick()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="143"
class="link-to-prism">src/table/head/table-head-cell.component.ts:143</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="sortLabelMap"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>sortLabelMap</b></span>
<a href="#sortLabelMap"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>sortLabelMap()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="149"
class="link-to-prism">src/table/head/table-head-cell.component.ts:149</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code>OperatorFunction<string, string></code>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-properties">
<h3 id="inputs">
Properties
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_filterTitle"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_filterTitle</b></span>
<a href="#_filterTitle"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("TABLE.FILTER")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="125" class="link-to-prism">src/table/head/table-head-cell.component.ts:125</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_sortAscendingLabel"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_sortAscendingLabel</b></span>
<a href="#_sortAscendingLabel"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("TABLE.SORT_ASCENDING")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="124" class="link-to-prism">src/table/head/table-head-cell.component.ts:124</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_sortDescendingLabel"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_sortDescendingLabel</b></span>
<a href="#_sortDescendingLabel"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("TABLE.SORT_DESCENDING")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="123" class="link-to-prism">src/table/head/table-head-cell.component.ts:123</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="theadAction"></a>
<span class="name">
<span class="modifier"></span>
<span ><b>theadAction</b></span>
<a href="#theadAction"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<b>Decorators : </b>
<br />
<code>
@HostBinding('class.thead_action')<br />
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="121" class="link-to-prism">src/table/head/table-head-cell.component.ts:121</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-accessors">
<h3 id="accessors">
Accessors
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="sortDescendingLabel"></a>
<span class="name"><b>sortDescendingLabel</b><a href="#sortDescendingLabel"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>sortDescendingLabel()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="94" class="link-to-prism">src/table/head/table-head-cell.component.ts:94</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>sortDescendingLabel(value: string | Observable<string>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="90" class="link-to-prism">src/table/head/table-head-cell.component.ts:90</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>
<code>string | Observable<string></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="sortAscendingLabel"></a>
<span class="name"><b>sortAscendingLabel</b><a href="#sortAscendingLabel"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>sortAscendingLabel()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="103" class="link-to-prism">src/table/head/table-head-cell.component.ts:103</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>sortAscendingLabel(value: string | Observable<string>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="99" class="link-to-prism">src/table/head/table-head-cell.component.ts:99</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>
<code>string | Observable<string></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="filterTitle"></a>
<span class="name"><b>filterTitle</b><a href="#filterTitle"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>filterTitle()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="112" class="link-to-prism">src/table/head/table-head-cell.component.ts:112</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>filterTitle(value: string | Observable<string>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="108" class="link-to-prism">src/table/head/table-head-cell.component.ts:108</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>
<code>string | Observable<string></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="tab-pane fade tab-source-code" id="source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
Component,
Input,
Output,
EventEmitter,
HostBinding,
OnChanges
} from "@angular/core";
import { Observable, OperatorFunction } from "rxjs";
import { I18n, Overridable } from "carbon-components-angular/i18n";
import { map } from "rxjs/operators";
import { TableHeaderItem } from "../table-header-item.class";
@Component({
// tslint:disable-next-line: component-selector
selector: "[cdsTableHeadCell], [ibmTableHeadCell]",
template: `
<button
class="cds--table-sort"
*ngIf="sortable && this.sort.observers.length > 0 && column.sortable"
[attr.aria-label]="(column.sorted && column.ascending ? getSortDescendingLabel() : getSortAscendingLabel()) | async"
aria-live="polite"
[ngClass]="{
'cds--table-sort--active': column.sorted,
'cds--table-sort--descending': column.ascending
}"
(click)="onClick()">
<span
class="cds--table-sort__flex"
[title]="column.title"
tabindex="-1">
<div *ngIf="!skeleton && !column.template" cdsTableHeadCellLabel>
{{column.data}}
</div>
<ng-template
*ngIf="!skeleton && column.template"
[ngTemplateOutlet]="column.template"
[ngTemplateOutletContext]="{data: column.data}">
</ng-template>
<svg
*ngIf="!skeleton"
focusable="false"
preserveAspectRatio="xMidYMid meet"
style="will-change: transform;"
xmlns="http://www.w3.org/2000/svg"
class="cds--table-sort__icon"
width="16"
height="16"
viewBox="0 0 16 16"
aria-hidden="true">
<path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path>
</svg>
<svg
*ngIf="!skeleton"
focusable="false"
preserveAspectRatio="xMidYMid meet"
style="will-change: transform;"
xmlns="http://www.w3.org/2000/svg"
class="cds--table-sort__icon-unsorted"
width="16"
height="16"
viewBox="0 0 16 16"
aria-hidden="true">
<path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path>
</svg>
</span>
</button>
<div
class="cds--table-header-label"
*ngIf="!skeleton && this.sort.observers.length === 0 || (this.sort.observers.length > 0 && !column.sortable) || !sortable">
<span *ngIf="!column.template" [title]="column.data">
<ng-container *ngIf="!skeleton">
{{column.data}}
</ng-container>
</span>
<ng-template
[ngTemplateOutlet]="column.template" [ngTemplateOutletContext]="{data: column.data}">
</ng-template>
</div>
`
})
export class TableHeadCell implements OnChanges {
@Input() column: TableHeaderItem;
@Input() skeleton = false;
@Input() sortable = true;
@Input()
set sortDescendingLabel(value: string | Observable<string>) {
this._sortDescendingLabel.override(value);
}
get sortDescendingLabel() {
return this._sortDescendingLabel.value;
}
@Input()
set sortAscendingLabel(value: string | Observable<string>) {
this._sortAscendingLabel.override(value);
}
get sortAscendingLabel() {
return this._sortAscendingLabel.value;
}
@Input()
set filterTitle(value: string | Observable<string>) {
this._filterTitle.override(value);
}
get filterTitle() {
return this._filterTitle.value;
}
/**
* Notifies that the column should be sorted
*/
@Output() sort = new EventEmitter();
@HostBinding("class.thead_action") theadAction = false;
protected _sortDescendingLabel = this.i18n.getOverridable("TABLE.SORT_DESCENDING");
protected _sortAscendingLabel = this.i18n.getOverridable("TABLE.SORT_ASCENDING");
protected _filterTitle = this.i18n.getOverridable("TABLE.FILTER");
constructor(protected i18n: I18n) { }
ngOnChanges() {
// Since it's not an input, and it touches the view, we're using `ngOnChanges`
// `get`ters have caused issues in the past with the view updating outside of change detection
this.theadAction = !!this.column.filterTemplate || this.sort.observers.length > 0;
}
getSortDescendingLabel(): Observable<string> {
return this._sortDescendingLabel.subject.pipe(this.sortLabelMap());
}
getSortAscendingLabel(): Observable<string> {
return this._sortAscendingLabel.subject.pipe(this.sortLabelMap());
}
onClick() {
if (!this.skeleton) {
this.sort.emit();
}
}
protected sortLabelMap(): OperatorFunction<string, string> {
return map((str: string) => {
if (this.column.ariaSortLabel) {
return this.column.ariaSortLabel;
}
if (this.column.formatSortLabel) {
return this.column.formatSortLabel(str, this.column.ariaSortLabel);
}
return `${this.column.data} - ${str}`;
});
}
}
</code></pre>
</div>
<div class="tab-pane fade " id="tree">
<div id="tree-container"></div>
<div class="tree-legend">
<div class="title">
<b>Legend</b>
</div>
<div>
<div class="color htmlelement"></div><span>Html element</span>
</div>
<div>
<div class="color component"></div><span>Component</span>
</div>
<div>
<div class="color direct