### File

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

### Description

A subcomponent that creates the thead of the table

## Basic usage

     *     <thead ibmTableHead [model]="model"></thead>
     *

### Implements

`AfterViewInit`

### Metadata

selector | `[ibmTableHead]`
styles | `.bx--table-expand-v2 { padding-left: 2.5rem; }`
template |
    <ng-container *ngIf="model">
    	<tr>
    		<th
    			ibmTableHeadExpand
    			*ngIf="model.hasExpandableRows()"
    			[ngClass]="{'bx--table-expand-v2': stickyHeader}"
    			[id]="model.getId('expand')">
    		</th>
    		<th
    			*ngIf="!skeleton && showSelectionColumn && enableSingleSelect"
    			style="width: 0;"
    			[id]="model.getId('select')">
    			<!-- add width 0; since the carbon styles don't seem to constrain this headers width -->
    		</th>
    		<th
    			ibmTableHeadCheckbox
    			*ngIf="!skeleton && showSelectionColumn && !enableSingleSelect"
    			[checked]="selectAllCheckbox"
    			[indeterminate]="selectAllCheckboxSomeSelected"
    			[ariaLabel]="getCheckboxHeaderLabel()"
    			[size]="size"
    			[skeleton]="skeleton"
    			(change)="onSelectAllCheckboxChange()"
    			[id]="model.getId('select')">
    		</th>
    		<ng-container *ngFor="let column of model.header; let i = index">
    			<th
    				*ngIf="column && column.visible"
    				[ngStyle]="column.style"
    				ibmTableHeadCell
    				[class]="column.className"
    				[sortable]="sortable"
    				[skeleton]="skeleton"
    				[id]="model.getId(i)"
    				[column]="column"
    				[skeleton]="skeleton"
    				[filterTitle]="getFilterTitle()"
    				[attr.colspan]="column.colSpan"
    				[attr.rowspan]="column.rowSpan"
    				(sort)="sort.emit(i)">
    			</th>
    		</ng-container>
    		<th *ngIf="!skeleton && stickyHeader && scrollbarWidth" [ngStyle]="{'width': scrollbarWidth + 'px', 'padding': 0, 'border': 0}">
    			<!--
    				Scrollbar pushes body to the left so this header column is added to push
    				the title bar the same amount and keep the header and body columns aligned.
    			-->
    		</th>
    	</tr>
    </ng-container>
    <ng-content></ng-content>

### Index

###### Properties
Protected _checkboxHeaderLabel Protected _filterTitle Protected _sortAscendingLabel Protected _sortDescendingLabel Public scrollbarWidth
###### Methods
getCheckboxHeaderLabel getFilterTitle getSortAscendingLabel getSortDescendingLabel ngAfterViewInit onSelectAllCheckboxChange
###### Inputs
checkboxHeaderLabel enableSingleSelect filterTitle model selectAllCheckbox selectAllCheckboxSomeSelected showSelectionColumn size skeleton sortable sortAscendingLabel sortDescendingLabel stickyHeader
###### Outputs
deselectAll selectAll sort
###### Accessors
checkboxHeaderLabel sortDescendingLabel sortAscendingLabel filterTitle

### Constructor

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

### Inputs

`checkboxHeaderLabel` |
Defined in src/table/head/table-head.component.ts:112

`enableSingleSelect` | Default value : `false`
Defined in src/table/head/table-head.component.ts:90

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

`model` | Type : `TableModel`
Defined in src/table/head/table-head.component.ts:86

`selectAllCheckbox` | Default value : `false`
Defined in src/table/head/table-head.component.ts:94

`selectAllCheckboxSomeSelected` | Default value : `false`
Defined in src/table/head/table-head.component.ts:92

`showSelectionColumn` | Default value : `true`
Defined in src/table/head/table-head.component.ts:88

`size` | Size of the table rows. Type : `"sm" | "sh" | "md" | "lg"` Default value : `"md"`
Defined in src/table/head/table-head.component.ts:109

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

`sortable` | Setting sortable to false will disable all headers including headers which are sortable. Is is possible to set the sortable state on the header item to disable/enable sorting for only some headers. Default value : `true`
Defined in src/table/head/table-head.component.ts:104

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

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

`stickyHeader` | Default value : `false`
Defined in src/table/head/table-head.component.ts:98

### Outputs

`deselectAll` | Emits if all rows are deselected. `$event` Type: `EventEmitter`
Defined in src/table/head/table-head.component.ts:162

`selectAll` | Emits if all rows are selected. `$event` Type: `EventEmitter`
Defined in src/table/head/table-head.component.ts:156

`sort` | Emits an index of the column that wants to be sorted. `$event` Type: `EventEmitter`
Defined in src/table/head/table-head.component.ts:150

### Methods

getCheckboxHeaderLabel
`getCheckboxHeaderLabel()`
Defined in src/table/head/table-head.component.ts:187
Returns : `Observable<string>`

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

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

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

ngAfterViewInit
`ngAfterViewInit()`
Defined in src/table/head/table-head.component.ts:173
Returns : `void`

onSelectAllCheckboxChange
`onSelectAllCheckboxChange()`
Defined in src/table/head/table-head.component.ts:179
Returns : `void`

### Properties

Protected _checkboxHeaderLabel
`_checkboxHeaderLabel: ```
Default value : `this.i18n.getOverridable("TABLE.CHECKBOX_HEADER")`
Defined in src/table/head/table-head.component.ts:166

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

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

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

Public scrollbarWidth
`scrollbarWidth: `number``
Type : `number`
Default value : `0`
Defined in src/table/head/table-head.component.ts:164

### Accessors

checkboxHeaderLabel
get `checkboxHeaderLabel()`
Defined in src/table/head/table-head.component.ts:116
set `checkboxHeaderLabel(value)`
Defined in src/table/head/table-head.component.ts:112
Parameters :
Name | Optional
value | No
Returns : `void`

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

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

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

    import {
    	Component,
    	Input,
    	Output,
    	EventEmitter,
    	AfterViewInit
    } from "@angular/core";

    import { TableModel } from "../table-model.class";
    import { getScrollbarWidth } from "../../utils/window-tools";
    import { I18n, Overridable } from "../../i18n/i18n.module";
    import { Observable } from "rxjs";

    /**
     * A subcomponent that creates the thead of the table
     *
     * ## Basic usage
     *
     * ```html
     * 	<thead ibmTableHead [model]="model"></thead>
     * ```
     */
    @Component({
    	// tslint:disable-next-line:component-selector
    	selector: "[ibmTableHead]",
    	template: `
    	<ng-container *ngIf="model">
    		<tr>
    			<th
    				ibmTableHeadExpand
    				*ngIf="model.hasExpandableRows()"
    				[ngClass]="{'bx--table-expand-v2': stickyHeader}"
    				[id]="model.getId('expand')">
    			</th>
    			<th
    				*ngIf="!skeleton && showSelectionColumn && enableSingleSelect"
    				style="width: 0;"
    				[id]="model.getId('select')">
    				<!-- add width 0; since the carbon styles don't seem to constrain this headers width -->
    			</th>
    			<th
    				ibmTableHeadCheckbox
    				*ngIf="!skeleton && showSelectionColumn && !enableSingleSelect"
    				[checked]="selectAllCheckbox"
    				[indeterminate]="selectAllCheckboxSomeSelected"
    				[ariaLabel]="getCheckboxHeaderLabel()"
    				[size]="size"
    				[skeleton]="skeleton"
    				(change)="onSelectAllCheckboxChange()"
    				[id]="model.getId('select')">
    			</th>
    			<ng-container *ngFor="let column of model.header; let i = index">
    				<th
    					*ngIf="column && column.visible"
    					[ngStyle]="column.style"
    					ibmTableHeadCell
    					[class]="column.className"
    					[sortable]="sortable"
    					[skeleton]="skeleton"
    					[id]="model.getId(i)"
    					[column]="column"
    					[skeleton]="skeleton"
    					[filterTitle]="getFilterTitle()"
    					[attr.colspan]="column.colSpan"
    					[attr.rowspan]="column.rowSpan"
    					(sort)="sort.emit(i)">
    				</th>
    			</ng-container>
    			<th *ngIf="!skeleton && stickyHeader && scrollbarWidth" [ngStyle]="{'width': scrollbarWidth + 'px', 'padding': 0, 'border': 0}">
    				<!--
    					Scrollbar pushes body to the left so this header column is added to push
    					the title bar the same amount and keep the header and body columns aligned.
    				-->
    			</th>
    		</tr>
    	</ng-container>
    	<ng-content></ng-content>
    	`,
    	styles: [`
    		.bx--table-expand-v2 {
    			padding-left: 2.5rem;
    		}
    	`]
    })
    export class TableHead implements AfterViewInit {
    	@Input() model: TableModel;

    	@Input() showSelectionColumn = true;

    	@Input() enableSingleSelect = false;

    	@Input() selectAllCheckboxSomeSelected = false;

    	@Input() selectAllCheckbox = false;

    	@Input() skeleton = false;

    	@Input() stickyHeader = false;

    	/**
    	 * Setting sortable to false will disable all headers including headers which are sortable. Is is
    	 * possible to set the sortable state on the header item to disable/enable sorting for only some headers.
    	 */
    	@Input() sortable = true;

    	/**
    	 * Size of the table rows.
    	 */
    	@Input() size: "sm" | "sh" | "md" | "lg" = "md";

    	@Input()
    	set checkboxHeaderLabel(value: string | Observable<string>) {
    		this._checkboxHeaderLabel.override(value);
    	}

    	get checkboxHeaderLabel() {
    		return this._checkboxHeaderLabel.value;
    	}

    	@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;
    	}

    	/**
    	 * Emits an index of the column that wants to be sorted.
    	 */
    	@Output() sort = new EventEmitter<number>();
    	/**
    	 * Emits if all rows are selected.
    	 *
    	 * @param model
    	 */
    	@Output() selectAll = new EventEmitter<TableModel>();
    	/**
    	 * Emits if all rows are deselected.
    	 *
    	 * @param model
    	 */
    	@Output() deselectAll = new EventEmitter<TableModel>();

    	public scrollbarWidth = 0;

    	protected _checkboxHeaderLabel = this.i18n.getOverridable("TABLE.CHECKBOX_HEADER");
    	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) {}

    	ngAfterViewInit() {
    		setTimeout(() => {
    			this.scrollbarWidth = getScrollbarWidth();
    		});
    	}

    	onSelectAllCheckboxChange() {
    		if (!this.selectAllCheckbox) {
    			this.selectAll.emit(this.model);
    		} else {
    			this.deselectAll.emit(this.model);
    		}
    	}

    	getCheckboxHeaderLabel(): Observable<string> {
    		return this._checkboxHeaderLabel.subject;
    	}

    	getSortDescendingLabel(): Observable<string> {
    		return this._sortDescendingLabel.subject;
    	}

    	getSortAscendingLabel(): Observable<string> {
    		return this._sortAscendingLabel.subject;
    	}

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

    		.bx--table-expand-v2 {
    			padding-left: 2.5rem;
    		}

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""