### File

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

### Metadata

selector | `[ibmTableBody]`
template |
    <ng-container *ngIf="model">
    	<ng-container *ngFor="let row of model.data; let i = index">
    		<tr
    			ibmTableRow
    			[model]="model"
    			[row]="row"
    			[size]="size"
    			[selected]="model.isRowSelected(i)"
    			[expandable]="model.isRowExpandable(i)"
    			[expanded]="model.isRowExpanded(i)"
    			[checkboxLabel]="getCheckboxRowLabel()"
    			[expandButtonAriaLabel]="getExpandButtonAriaLabel()"
    			[showSelectionColumn]="showSelectionColumn"
    			[enableSingleSelect]="enableSingleSelect"
    			[skeleton]="skeleton"
    			(selectRow)="onRowCheckboxChange(i)"
    			(deselectRow)="onRowCheckboxChange(i)"
    			(expandRow)="model.expandRow(i, !model.isRowExpanded(i))"
    			(rowClick)="onRowClick(i)"
    			*ngIf="!model.isRowFiltered(i)"
    			[class]="(model.rowsClass[i] ? model.rowsClass[i] : null)"
    			[ngClass]="{
    				'tbody_row--success': !model.isRowSelected(i) && model.getRowContext(i) === 'success',
    				'tbody_row--warning': !model.isRowSelected(i) && model.getRowContext(i) === 'warning',
    				'tbody_row--info': !model.isRowSelected(i) && model.getRowContext(i) === 'info',
    				'tbody_row--error': !model.isRowSelected(i) && model.getRowContext(i) === 'error'
    			}">
    		</tr>
    		<tr
    			*ngIf="model.isRowExpanded(i) && !model.isRowFiltered(i)"
    			ibmTableExpandedRow
    			ibmExpandedRowHover
    			[row]="row"
    			[expanded]="model.isRowExpanded(i)"
    			[skeleton]="skeleton">
    		</tr>
    	</ng-container>
    </ng-container>
    <ng-content></ng-content>

### Index

###### Properties
Protected _checkboxRowLabel Protected _expandButtonAriaLabel
###### Methods
getCheckboxRowLabel getExpandButtonAriaLabel onRowCheckboxChange onRowClick
###### Inputs
checkboxRowLabel enableSingleSelect expandButtonAriaLabel model selectionLabelColumn showSelectionColumn size skeleton
###### Outputs
deselectRow rowClick selectRow
###### Accessors
expandButtonAriaLabel checkboxRowLabel

### Constructor

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

### Inputs

`checkboxRowLabel` |
Defined in src/table/body/table-body.component.ts:74

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

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

`model` | Type : `TableModel`
Defined in src/table/body/table-body.component.ts:57

`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-body.component.ts:102

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

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

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

### Outputs

`deselectRow` | Emits if a single row is deselected. `$event` Type: `EventEmitter`
Defined in src/table/body/table-body.component.ts:118

`rowClick` | Emits if a row item excluding expandButtons, checkboxes, or radios is clicked. `$event` Type: `EventEmitter`
Defined in src/table/body/table-body.component.ts:123

`selectRow` | Emits if a single row is selected. `$event` Type: `EventEmitter`
Defined in src/table/body/table-body.component.ts:111

### Methods

getCheckboxRowLabel
`getCheckboxRowLabel()`
Defined in src/table/body/table-body.component.ts:147
Returns : `Observable<string>`

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

onRowCheckboxChange
`onRowCheckboxChange(index: number)`
Defined in src/table/body/table-body.component.ts:135
Triggered when a single row is clicked. Updates the header checkbox state. Emits the `selectRow` or `deselectRow` event. Parameters :
Name | Type | Optional
index | `number` | No
Returns : `void`

onRowClick
`onRowClick(index: number)`
Defined in src/table/body/table-body.component.ts:143
Parameters :
Name | Type | Optional
index | `number` | No
Returns : `void`

### Properties

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

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

### Accessors

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

checkboxRowLabel
get `checkboxRowLabel()`
Defined in src/table/body/table-body.component.ts:78
set `checkboxRowLabel(value)`
Defined in src/table/body/table-body.component.ts:74
Parameters :
Name | Optional
value | No
Returns : `void`

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

    @Component({
    	// tslint:disable-next-line: component-selector
    	selector: "[ibmTableBody]",
    	template: `
    		<ng-container *ngIf="model">
    			<ng-container *ngFor="let row of model.data; let i = index">
    				<tr
    					ibmTableRow
    					[model]="model"
    					[row]="row"
    					[size]="size"
    					[selected]="model.isRowSelected(i)"
    					[expandable]="model.isRowExpandable(i)"
    					[expanded]="model.isRowExpanded(i)"
    					[checkboxLabel]="getCheckboxRowLabel()"
    					[expandButtonAriaLabel]="getExpandButtonAriaLabel()"
    					[showSelectionColumn]="showSelectionColumn"
    					[enableSingleSelect]="enableSingleSelect"
    					[skeleton]="skeleton"
    					(selectRow)="onRowCheckboxChange(i)"
    					(deselectRow)="onRowCheckboxChange(i)"
    					(expandRow)="model.expandRow(i, !model.isRowExpanded(i))"
    					(rowClick)="onRowClick(i)"
    					*ngIf="!model.isRowFiltered(i)"
    					[class]="(model.rowsClass[i] ? model.rowsClass[i] : null)"
    					[ngClass]="{
    						'tbody_row--success': !model.isRowSelected(i) && model.getRowContext(i) === 'success',
    						'tbody_row--warning': !model.isRowSelected(i) && model.getRowContext(i) === 'warning',
    						'tbody_row--info': !model.isRowSelected(i) && model.getRowContext(i) === 'info',
    						'tbody_row--error': !model.isRowSelected(i) && model.getRowContext(i) === 'error'
    					}">
    				</tr>
    				<tr
    					*ngIf="model.isRowExpanded(i) && !model.isRowFiltered(i)"
    					ibmTableExpandedRow
    					ibmExpandedRowHover
    					[row]="row"
    					[expanded]="model.isRowExpanded(i)"
    					[skeleton]="skeleton">
    				</tr>
    			</ng-container>
    		</ng-container>
    		<ng-content></ng-content>
    	`
    })
    export class TableBody {
    	@Input() model: TableModel;

    	/**
    	 * 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 checkboxRowLabel(value: string | Observable<string>) {
    		this._checkboxRowLabel.override(value);
    	}

    	get checkboxRowLabel() {
    		return this._checkboxRowLabel.value;
    	}

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

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

    	/**
    	 * 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 if a single row is selected.
    	 *
    	 * @param ({model: this.model, selectedRowIndex: index})
    	 */
    	@Output() selectRow = new EventEmitter<Object>();

    	/**
    	 * Emits if a single row is deselected.
    	 *
    	 * @param ({model: this.model, deselectedRowIndex: index})
    	 */
    	@Output() deselectRow = new EventEmitter<Object>();

    	/**
    	 * Emits if a row item excluding expandButtons, checkboxes, or radios is clicked.
    	 */
    	@Output() rowClick = new EventEmitter<number>();

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

    	constructor(protected i18n: I18n) { }

    	/**
    	 * Triggered when a single row is clicked.
    	 * Updates the header checkbox state.
    	 * Emits the `selectRow` or `deselectRow` event.
    	 */
    	onRowCheckboxChange(index: number) {
    		if (this.model.isRowSelected(index)) {
    			this.deselectRow.emit({ model: this.model, deselectedRowIndex: index });
    		} else {
    			this.selectRow.emit({ model: this.model, selectedRowIndex: index });
    		}
    	}

    	onRowClick(index: number) {
    		this.rowClick.emit(index);
    	}

    	getCheckboxRowLabel(): Observable<string> {
    		return this._checkboxRowLabel.subject;
    	}

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

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""