### File

`src/table/body/table-row.component.ts`

### Metadata

selector | `[ibmTableRow]`
template |
    <ng-container *ngIf="model">
    	<td
    		*ngIf="model.hasExpandableRows()"
    		ibmTableExpandButton
    		class="bx--table-expand-v2"
    		[expanded]="expanded"
    		[expandable]="expandable"
    		[skeleton]="skeleton"
    		[ariaLabel]="getExpandButtonAriaLabel()"
    		[headers]="model.getHeaderId('expand')"
    		(expandRow)="expandRow.emit()">
    	</td>
    	<td
    		*ngIf="!skeleton && showSelectionColumn && !enableSingleSelect"
    		ibmTableCheckbox
    		class="bx--table-column-checkbox"
    		[size]="size"
    		[selected]="selected"
    		[label]="getCheckboxLabel()"
    		[row]="row"
    		[skeleton]="skeleton"
    		[headers]="model.getHeaderId('select')"
    		(change)="onSelectionChange()">
    	</td>
    	<td
    		*ngIf="!skeleton && showSelectionColumn && enableSingleSelect"
    		ibmTableRadio
    		[selected]="selected"
    		[label]="getCheckboxLabel()"
    		[row]="row"
    		[skeleton]="skeleton"
    		[headers]="model.getHeaderId('select')"
    		(change)="onSelectionChange()">
    	</td>
    	<ng-container *ngFor="let item of row; let j = index">
    		<td
    			*ngIf="item && model.getHeader(j) && model.getHeader(j).visible"
    			ibmTableData
    			[headers]="model.getHeaderId(j, item.colSpan)"
    			[item]="item"
    			[class]="model.getHeader(j).className"
    			[ngStyle]="model.getHeader(j).style"
    			[skeleton]="skeleton"
    			[attr.colspan]="item.colSpan"
    			[attr.rowspan]="item.rowSpan"
    			(click)="onRowClick()"
    			(keydown.enter)="onRowClick()">
    		</td>
    		<td
    			*ngIf="item && model.getHeader(j) == null"
    			ibmTableData
    			[headers]="model.getHeaderId(j, item.colSpan)"
    			[item]="item"
    			[skeleton]="skeleton"
    			[attr.colspan]="item.colSpan"
    			[attr.rowspan]="item.rowSpan"
    			(click)="onRowClick()"
    			(keydown.enter)="onRowClick()">
    		</td>
    	</ng-container>
    </ng-container>
    <ng-content></ng-content>

### Index

###### Properties
Protected _checkboxLabel Protected _expandButtonAriaLabel
###### Methods
getCheckboxLabel getExpandButtonAriaLabel onRowClick onSelectionChange
###### Inputs
checkboxLabel enableSingleSelect expandable expandButtonAriaLabel expanded model row selected selectionLabelColumn showSelectionColumn size skeleton
###### Outputs
deselectRow expandRow rowClick selectRow
###### HostBindings
attr.data-parent-row class.bx--data-table--selected class.bx--expandable-row class.bx--parent-row class.tbody_row--selectable
###### HostListeners
click
###### Accessors
expandButtonAriaLabel checkboxLabel

### Constructor

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

### Inputs

`checkboxLabel` |
Defined in src/table/body/table-row.component.ts:116

`enableSingleSelect` | Controls whether to enable multiple or single row selection. Default value : `false`
Defined in src/table/body/table-row.component.ts:104

`expandable` | Default value : `false`
Defined in src/table/body/table-row.component.ts:92

`expandButtonAriaLabel` |
Defined in src/table/body/table-row.component.ts:107

`expanded` | Default value : `false`
Defined in src/table/body/table-row.component.ts:90

`model` | `TableModel` with data the table is to display. Type : `TableModel`
Defined in src/table/body/table-row.component.ts:86

`row` | Type : `TableItem[]`
Defined in src/table/body/table-row.component.ts:88

`selected` | Default value : `false`
Defined in src/table/body/table-row.component.ts:94

`selectionLabelColumn` | Used to populate the row selection checkbox label with a useful value if set. Example:
         * <ibm-table [selectionLabelColumn]="0"></ibm-table>
         * <!-- results in aria-label="Select first column value"
         * (where "first column value" is the value of the first column in the row -->
         *
Type : `number`
Defined in src/table/body/table-row.component.ts:139

`showSelectionColumn` | Controls whether to show the selection checkboxes column or not. Default value : `true`
Defined in src/table/body/table-row.component.ts:127

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

`skeleton` | Default value : `false`
Defined in src/table/body/table-row.component.ts:141

### Outputs

`deselectRow` | Emits when the row is deselected. `$event` Type: `EventEmitter`
Defined in src/table/body/table-row.component.ts:151

`expandRow` | Emits when the row is expanded `$event` Type: `EventEmitter`
Defined in src/table/body/table-row.component.ts:156

`rowClick` | Emits when a row is clicked regardless of `enableSingleSelect` or `showSelectionColumn`. Should only get emitted when a row item is selected excluding expand buttons, checkboxes, or radios. `$event` Type: `EventEmitter`
Defined in src/table/body/table-row.component.ts:163

`selectRow` | Emits when the row is selected. `$event` Type: `EventEmitter`
Defined in src/table/body/table-row.component.ts:146

### HostBindings

attr.data-parent-row
`attr.data-parent-row: ```
Defined in src/table/body/table-row.component.ts:181

class.bx--data-table--selected
`class.bx--data-table--selected: ```
Defined in src/table/body/table-row.component.ts:165

class.bx--expandable-row
`class.bx--expandable-row: ```
Defined in src/table/body/table-row.component.ts:173

class.bx--parent-row
`class.bx--parent-row: ```
Defined in src/table/body/table-row.component.ts:169

class.tbody_row--selectable
`class.tbody_row--selectable: ```
Defined in src/table/body/table-row.component.ts:177

### HostListeners

click
`click()`
Defined in src/table/body/table-row.component.ts:191

### Methods

getCheckboxLabel
`getCheckboxLabel()`
Defined in src/table/body/table-row.component.ts:209
Returns : `Observable<string>`

getExpandButtonAriaLabel
`getExpandButtonAriaLabel()`
Defined in src/table/body/table-row.component.ts:213
Returns : `Observable<string>`

onRowClick
`onRowClick()`
Defined in src/table/body/table-row.component.ts:197
Returns : `void`

onSelectionChange
`onSelectionChange()`
Defined in src/table/body/table-row.component.ts:201
Returns : `void`

### Properties

Protected _checkboxLabel
`_checkboxLabel: ```
Default value : `this.i18n.getOverridable("TABLE.CHECKBOX_ROW")`
Defined in src/table/body/table-row.component.ts:185

Protected _expandButtonAriaLabel
`_expandButtonAriaLabel: ```
Default value : `this.i18n.getOverridable("TABLE.EXPAND_BUTTON")`
Defined in src/table/body/table-row.component.ts:186

### Accessors

expandButtonAriaLabel
get `expandButtonAriaLabel()`
Defined in src/table/body/table-row.component.ts:111
set `expandButtonAriaLabel(value)`
Defined in src/table/body/table-row.component.ts:107
Parameters :
Name | Optional
value | No
Returns : `void`

checkboxLabel
get `checkboxLabel()`
Defined in src/table/body/table-row.component.ts:120
set `checkboxLabel(value)`
Defined in src/table/body/table-row.component.ts:116
Parameters :
Name | Optional
value | No
Returns : `void`

    import {
    	Component,
    	Input,
    	Output,
    	EventEmitter,
    	HostBinding,
    	HostListener
    } from "@angular/core";
    import { TableModel } from "./../table-model.class";
    import { I18n, Overridable } from "./../../i18n/i18n.module";
    import { TableItem } from "./../table-item.class";
    import { Observable } from "rxjs";

    @Component({
    	// tslint:disable-next-line: component-selector
    	selector: "[ibmTableRow]",
    	template: `
    		<ng-container *ngIf="model">
    			<td
    				*ngIf="model.hasExpandableRows()"
    				ibmTableExpandButton
    				class="bx--table-expand-v2"
    				[expanded]="expanded"
    				[expandable]="expandable"
    				[skeleton]="skeleton"
    				[ariaLabel]="getExpandButtonAriaLabel()"
    				[headers]="model.getHeaderId('expand')"
    				(expandRow)="expandRow.emit()">
    			</td>
    			<td
    				*ngIf="!skeleton && showSelectionColumn && !enableSingleSelect"
    				ibmTableCheckbox
    				class="bx--table-column-checkbox"
    				[size]="size"
    				[selected]="selected"
    				[label]="getCheckboxLabel()"
    				[row]="row"
    				[skeleton]="skeleton"
    				[headers]="model.getHeaderId('select')"
    				(change)="onSelectionChange()">
    			</td>
    			<td
    				*ngIf="!skeleton && showSelectionColumn && enableSingleSelect"
    				ibmTableRadio
    				[selected]="selected"
    				[label]="getCheckboxLabel()"
    				[row]="row"
    				[skeleton]="skeleton"
    				[headers]="model.getHeaderId('select')"
    				(change)="onSelectionChange()">
    			</td>
    			<ng-container *ngFor="let item of row; let j = index">
    				<td
    					*ngIf="item && model.getHeader(j) && model.getHeader(j).visible"
    					ibmTableData
    					[headers]="model.getHeaderId(j, item.colSpan)"
    					[item]="item"
    					[class]="model.getHeader(j).className"
    					[ngStyle]="model.getHeader(j).style"
    					[skeleton]="skeleton"
    					[attr.colspan]="item.colSpan"
    					[attr.rowspan]="item.rowSpan"
    					(click)="onRowClick()"
    					(keydown.enter)="onRowClick()">
    				</td>
    				<td
    					*ngIf="item && model.getHeader(j) == null"
    					ibmTableData
    					[headers]="model.getHeaderId(j, item.colSpan)"
    					[item]="item"
    					[skeleton]="skeleton"
    					[attr.colspan]="item.colSpan"
    					[attr.rowspan]="item.rowSpan"
    					(click)="onRowClick()"
    					(keydown.enter)="onRowClick()">
    				</td>
    			</ng-container>
    		</ng-container>
    		<ng-content></ng-content>
    	`
    })
    export class TableRowComponent {
    	/**
    	 * `TableModel` with data the table is to display.
    	 */
    	@Input() model: TableModel;

    	@Input() row: TableItem[];

    	@Input() expanded = false;

    	@Input() expandable = false;

    	@Input() selected = false;

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

    	/**
    	 * Controls whether to enable multiple or single row selection.
    	 */
    	@Input() enableSingleSelect = false;

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

    	get expandButtonAriaLabel() {
    		return this._expandButtonAriaLabel.value;
    	}

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

    	get checkboxLabel() {
    		return this._checkboxLabel.value;
    	}

    	/**
    	 * Controls whether to show the selection checkboxes column or not.
    	 */
    	@Input() showSelectionColumn = true;

    	/**
    	 * Used to populate the row selection checkbox label with a useful value if set.
    	 *
    	 * Example:
    	 * ```
    	 * <ibm-table [selectionLabelColumn]="0"></ibm-table>
    	 * <!-- results in aria-label="Select first column value"
    	 * (where "first column value" is the value of the first column in the row -->
    	 * ```
    	 */
    	@Input() selectionLabelColumn: number;

    	@Input() skeleton = false;

    	/**
    	 * Emits when the row is selected.
    	 */
    	@Output() selectRow = new EventEmitter();

    	/**
    	 * Emits when the row is deselected.
    	 */
    	@Output() deselectRow = new EventEmitter();

    	/**
    	 * Emits when the row is expanded
    	 */
    	@Output() expandRow = new EventEmitter();

    	/**
    	 * Emits when a row is clicked regardless of `enableSingleSelect` or `showSelectionColumn`.
    	 * Should only get emitted when a row item is selected excluding expand buttons,
    	 * checkboxes, or radios.
    	 */
    	@Output() rowClick = new EventEmitter();

    	@HostBinding("class.bx--data-table--selected") get selectedClass() {
    		return this.selected;
    	}

    	@HostBinding("class.bx--parent-row") get parentRowClass() {
    		return this.expandable;
    	}

    	@HostBinding("class.bx--expandable-row") get expandableRowClass() {
    		return this.expanded;
    	}

    	@HostBinding("class.tbody_row--selectable") get selectableClass() {
    		return false; // this.singleSelect
    	}

    	@HostBinding("attr.data-parent-row") get isParentRow() {
    		return this.expandable ? true : null;
    	}

    	protected _checkboxLabel = this.i18n.getOverridable("TABLE.CHECKBOX_ROW");
    	protected _expandButtonAriaLabel = this.i18n.getOverridable("TABLE.EXPAND_BUTTON");

    	constructor(protected i18n: I18n) { }

    	@HostListener("click")
    	onHostClick() {
    		if (this.enableSingleSelect && !this.showSelectionColumn) {
    			this.onSelectionChange();
    		}
    	}

    	onRowClick() {
    		this.rowClick.emit();
    	}

    	onSelectionChange() {
    		if (this.selected) {
    			this.deselectRow.emit();
    		} else {
    			this.selectRow.emit();
    		}
    	}

    	getCheckboxLabel(): Observable<string> {
    		return this._checkboxLabel.subject;
    	}

    	getExpandButtonAriaLabel(): Observable<string> {
    		return this._expandButtonAriaLabel.subject;
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""