### File

`src/table/head/table-head-cell.component.ts`

### Implements

`OnChanges`

### Metadata

selector | `[ibmTableHeadCell]`
template |
    <button
    	class="bx--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]="{
    		'bx--table-sort--active': column.sorted,
    		'bx--table-sort--ascending': column.ascending
    	}"
    	(click)="onClick()">
    	<span
    		*ngIf="!column.template"
    		[title]="column.data"
    		tabindex="-1">
    		<div *ngIf="!skeleton">
    			{{column.data}}
    		</div>
    	</span>
    	<ng-template
    		*ngIf="!skeleton"
    		[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="bx--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="bx--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>
    </button>
    <span
    	class="bx--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">{{column.data}}</span>
    	<ng-template
    		[ngTemplateOutlet]="column.template" [ngTemplateOutletContext]="{data: column.data}">
    	</ng-template>
    </span>
    <button
    	[ngClass]="{'active': column.filterCount > 0}"
    	*ngIf="column.filterTemplate"
    	type="button"
    	aria-expanded="false"
    	aria-haspopup="true"
    	[ibmTooltip]="column.filterTemplate"
    	trigger="click"
    	[title]="getFilterTitle() | async"
    	placement="bottom,top"
    	[data]="column.filterData">
    	<svg
    		xmlns="http://www.w3.org/2000/svg"
    		class="icon--sm"
    		width="16"
    		height="16"
    		viewBox="0 0 16 16">
    		<path d="M0 0v3l6 8v5h4v-5l6-8V0H0zm9 10.7V15H7v-4.3L1.3 3h13.5L9 10.7z"/>
    	</svg>
    	<span *ngIf="column.filterCount > 0">
    		{{column.filterCount}}
    	</span>
    </button>

### Index

###### Properties
Protected _filterTitle Protected _sortAscendingLabel Protected _sortDescendingLabel
###### Methods
getFilterTitle getSortAscendingLabel getSortDescendingLabel ngOnChanges onClick Protected sortLabelMap
###### Inputs
column filterTitle skeleton sortable sortAscendingLabel sortDescendingLabel
###### Outputs
sort
###### HostBindings
class.thead_action
###### Accessors
sortDescendingLabel sortAscendingLabel filterTitle

### Constructor

`constructor(i18n: I18n)`
Defined in src/table/head/table-head-cell.component.ts:144
Parameters :
Name | Type | Optional
i18n | `I18n` | No

### Inputs

`column` | Type : `TableHeaderItem`
Defined in src/table/head/table-head-cell.component.ts:102

`filterTitle` |
Defined in src/table/head/table-head-cell.component.ts:127

`skeleton` | Default value : `false`
Defined in src/table/head/table-head-cell.component.ts:104

`sortable` | Default value : `true`
Defined in src/table/head/table-head-cell.component.ts:106

`sortAscendingLabel` |
Defined in src/table/head/table-head-cell.component.ts:118

`sortDescendingLabel` |
Defined in src/table/head/table-head-cell.component.ts:109

### Outputs

`sort` | Notifies that the column should be sorted `$event` Type: `EventEmitter`
Defined in src/table/head/table-head-cell.component.ts:138

### HostBindings

class.thead_action
`class.thead_action: ```
Default value : `false`
Defined in src/table/head/table-head-cell.component.ts:140

### Methods

getFilterTitle
`getFilterTitle()`
Defined in src/table/head/table-head-cell.component.ts:162
Returns : `Observable<string>`

getSortAscendingLabel
`getSortAscendingLabel()`
Defined in src/table/head/table-head-cell.component.ts:158
Returns : `Observable<string>`

getSortDescendingLabel
`getSortDescendingLabel()`
Defined in src/table/head/table-head-cell.component.ts:154
Returns : `Observable<string>`

ngOnChanges
`ngOnChanges()`
Defined in src/table/head/table-head-cell.component.ts:148
Returns : `void`

onClick
`onClick()`
Defined in src/table/head/table-head-cell.component.ts:166
Returns : `void`

Protected sortLabelMap
`sortLabelMap()`
Defined in src/table/head/table-head-cell.component.ts:172
Returns : `OperatorFunction<string, string>`

### Properties

Protected _filterTitle
`_filterTitle: ```
Default value : `this.i18n.getOverridable("TABLE.FILTER")`
Defined in src/table/head/table-head-cell.component.ts:144

Protected _sortAscendingLabel
`_sortAscendingLabel: ```
Default value : `this.i18n.getOverridable("TABLE.SORT_ASCENDING")`
Defined in src/table/head/table-head-cell.component.ts:143

Protected _sortDescendingLabel
`_sortDescendingLabel: ```
Default value : `this.i18n.getOverridable("TABLE.SORT_DESCENDING")`
Defined in src/table/head/table-head-cell.component.ts:142

### Accessors

sortDescendingLabel
get `sortDescendingLabel()`
Defined in src/table/head/table-head-cell.component.ts:113
set `sortDescendingLabel(value)`
Defined in src/table/head/table-head-cell.component.ts:109
Parameters :
Name | Optional
value | No
Returns : `void`

sortAscendingLabel
get `sortAscendingLabel()`
Defined in src/table/head/table-head-cell.component.ts:122
set `sortAscendingLabel(value)`
Defined in src/table/head/table-head-cell.component.ts:118
Parameters :
Name | Optional
value | No
Returns : `void`

filterTitle
get `filterTitle()`
Defined in src/table/head/table-head-cell.component.ts:131
set `filterTitle(value)`
Defined in src/table/head/table-head-cell.component.ts:127
Parameters :
Name | Optional
value | No
Returns : `void`

    import {
    	Component,
    	Input,
    	Output,
    	EventEmitter,
    	HostBinding,
    	OnChanges
    } from "@angular/core";
    import { Observable, OperatorFunction } from "rxjs";
    import { I18n, Overridable } from "./../../i18n/i18n.module";
    import { map } from "rxjs/operators";
    import { TableHeaderItem } from "./../table-header-item.class";

    @Component({
    	// tslint:disable-next-line: component-selector
    	selector: "[ibmTableHeadCell]",
    	template: `
    		<button
    			class="bx--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]="{
    				'bx--table-sort--active': column.sorted,
    				'bx--table-sort--ascending': column.ascending
    			}"
    			(click)="onClick()">
    			<span
    				*ngIf="!column.template"
    				[title]="column.data"
    				tabindex="-1">
    				<div *ngIf="!skeleton">
    					{{column.data}}
    				</div>
    			</span>
    			<ng-template
    				*ngIf="!skeleton"
    				[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="bx--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="bx--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>
    		</button>
    		<span
    			class="bx--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">{{column.data}}</span>
    			<ng-template
    				[ngTemplateOutlet]="column.template" [ngTemplateOutletContext]="{data: column.data}">
    			</ng-template>
    		</span>
    		<button
    			[ngClass]="{'active': column.filterCount > 0}"
    			*ngIf="column.filterTemplate"
    			type="button"
    			aria-expanded="false"
    			aria-haspopup="true"
    			[ibmTooltip]="column.filterTemplate"
    			trigger="click"
    			[title]="getFilterTitle() | async"
    			placement="bottom,top"
    			[data]="column.filterData">
    			<svg
    				xmlns="http://www.w3.org/2000/svg"
    				class="icon--sm"
    				width="16"
    				height="16"
    				viewBox="0 0 16 16">
    				<path d="M0 0v3l6 8v5h4v-5l6-8V0H0zm9 10.7V15H7v-4.3L1.3 3h13.5L9 10.7z"/>
    			</svg>
    			<span *ngIf="column.filterCount > 0">
    				{{column.filterCount}}
    			</span>
    		</button>
    	`
    })
    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());
    	}

    	getFilterTitle(): Observable<string> {
    		return this._filterTitle.subject;
    	}

    	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}`;
    		});
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""