### File

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

### Description

The table toolbar is reserved for global table actions such as table settings, complex filter, export, or editing table data.

## Basic usage

     * <ibm-table-toolbar [model]="model">
     *        <ibm-table-toolbar-actions>
     *            <button ibmButton="primary">
     *                Delete
     *                <ibm-icon-delete16 class="bx--btn__icon"></ibm-icon-delete16>
     *            </button>
     *            <button ibmButton="primary">
     *                Save
     *                <ibm-icon-save16 class="bx--btn__icon"></ibm-icon-save16>
     *            </button>
     *            <button ibmButton="primary">
     *                Download
     *                <ibm-icon-download16 class="bx--btn__icon"></ibm-icon-download16>
     *            </button>
     *        </ibm-table-toolbar-actions>
     *            <ibm-table-toolbar-content>
     *            <ibm-table-toolbar-search [expandable]="true"></ibm-table-toolbar-search>
     *            <button ibmButton="toolbar-action">
     *                <ibm-icon-settings16 class="bx--toolbar-action__icon"></ibm-icon-settings16>
     *            </button>
     *            <button ibmButton="primary" size="sm">
     *                Primary Button
     *                <ibm-icon-add20 class="bx--btn__icon"></ibm-icon-add20>
     *            </button>
     *        </ibm-table-toolbar-content>
     *    </ibm-table-toolbar>
     *

### Metadata

selector | `ibm-table-toolbar`
template |
    <section class="bx--table-toolbar">
    	<div
    		*ngIf="model"
    		class="bx--batch-actions"
    		[ngClass]="{
    			'bx--batch-actions--active': selected
    		}"
    		[attr.aria-label]="actionBarLabel.subject | async">
    		<div class="bx--action-list">
    			<ng-content select="ibm-table-toolbar-actions"></ng-content>
    			<button ibmButton="primary" class="bx--batch-summary__cancel" (click)="onCancel()">{{_cancelText.subject | async}}</button>
    		</div>
    		<div class="bx--batch-summary">
    			<p class="bx--batch-summary__para">
    				<span>{{count}}</span> {{_batchText.subject | async}}
    			</p>
    		</div>
    	</div>
    	<ng-content></ng-content>
    </section>

### Index

###### Properties
_batchText _cancelText actionBarLabel
###### Methods
onCancel
###### Inputs
ariaLabel batchText cancelText model
###### Accessors
batchText ariaLabel cancelText count selected

### Constructor

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

### Inputs

`ariaLabel` | Type : `literal type`
Defined in src/table/toolbar/table-toolbar.component.ts:76

`batchText` | Type : `string`
Defined in src/table/toolbar/table-toolbar.component.ts:73

`cancelText` | Type : `literal type`
Defined in src/table/toolbar/table-toolbar.component.ts:79

`model` | Type : `TableModel`
Defined in src/table/toolbar/table-toolbar.component.ts:71

### Methods

onCancel
`onCancel()`
Defined in src/table/toolbar/table-toolbar.component.ts:100
Returns : `void`

### Properties

_batchText
`_batchText: `Overridable``
Type : `Overridable`
Default value : `this.i18n.getOverridable("TABLE_TOOLBAR.BATCH_TEXT")`
Defined in src/table/toolbar/table-toolbar.component.ts:89

_cancelText
`_cancelText: `Overridable``
Type : `Overridable`
Default value : `this.i18n.getOverridable("TABLE_TOOLBAR.CANCEL")`
Defined in src/table/toolbar/table-toolbar.component.ts:88

actionBarLabel
`actionBarLabel: `Overridable``
Type : `Overridable`
Default value : `this.i18n.getOverridable("TABLE_TOOLBAR.ACTION_BAR")`
Defined in src/table/toolbar/table-toolbar.component.ts:87

### Accessors

batchText
set `batchText(value: string)`
Defined in src/table/toolbar/table-toolbar.component.ts:73
Parameters :
Name | Type | Optional
value | `string` | No
Returns : `void`

ariaLabel
set `ariaLabel(value: literal type)`
Defined in src/table/toolbar/table-toolbar.component.ts:76
Parameters :
Name | Type | Optional
value | `literal type` | No
Returns : `void`

cancelText
get `cancelText()`
Defined in src/table/toolbar/table-toolbar.component.ts:83
set `cancelText(value: literal type)`
Defined in src/table/toolbar/table-toolbar.component.ts:79
Parameters :
Name | Type | Optional
value | `literal type` | No
Returns : `void`

count
get `count()`
Defined in src/table/toolbar/table-toolbar.component.ts:93

selected
get `selected()`
Defined in src/table/toolbar/table-toolbar.component.ts:96

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

    /**
     * The table toolbar is reserved for global table actions such as table settings, complex filter, export, or editing table data.
     *
     * ## Basic usage
     *
     * ```html
     * <ibm-table-toolbar [model]="model">
     *		<ibm-table-toolbar-actions>
     *			<button ibmButton="primary">
     *				Delete
     *				<ibm-icon-delete16 class="bx--btn__icon"></ibm-icon-delete16>
     *			</button>
     *			<button ibmButton="primary">
     *				Save
     *				<ibm-icon-save16 class="bx--btn__icon"></ibm-icon-save16>
     *			</button>
     *			<button ibmButton="primary">
     *				Download
     *				<ibm-icon-download16 class="bx--btn__icon"></ibm-icon-download16>
     *			</button>
     *		</ibm-table-toolbar-actions>
     *			<ibm-table-toolbar-content>
     *			<ibm-table-toolbar-search [expandable]="true"></ibm-table-toolbar-search>
     *			<button ibmButton="toolbar-action">
     *				<ibm-icon-settings16 class="bx--toolbar-action__icon"></ibm-icon-settings16>
     *			</button>
     *			<button ibmButton="primary" size="sm">
     *				Primary Button
     *				<ibm-icon-add20 class="bx--btn__icon"></ibm-icon-add20>
     *			</button>
     *		</ibm-table-toolbar-content>
     *	</ibm-table-toolbar>
     * ```
     *
     */
    @Component({
    	selector: "ibm-table-toolbar",
    	template: `
    	<section class="bx--table-toolbar">
    		<div
    			*ngIf="model"
    			class="bx--batch-actions"
    			[ngClass]="{
    				'bx--batch-actions--active': selected
    			}"
    			[attr.aria-label]="actionBarLabel.subject | async">
    			<div class="bx--action-list">
    				<ng-content select="ibm-table-toolbar-actions"></ng-content>
    				<button ibmButton="primary" class="bx--batch-summary__cancel" (click)="onCancel()">{{_cancelText.subject | async}}</button>
    			</div>
    			<div class="bx--batch-summary">
    				<p class="bx--batch-summary__para">
    					<span>{{count}}</span> {{_batchText.subject | async}}
    				</p>
    			</div>
    		</div>
    		<ng-content></ng-content>
    	</section>
    	`
    })
    export class TableToolbar {
    	@Input() model: TableModel;

    	@Input() set batchText (value: string) {
    		this._batchText.override(value);
    	}
    	@Input() set ariaLabel (value: { ACTION_BAR: string }) {
    		this.actionBarLabel.override(value.ACTION_BAR);
    	}
    	@Input() set cancelText(value: { CANCEL: string }) {
    		this._cancelText.override(value.CANCEL);
    	}

    	get cancelText(): { CANCEL: string } {
    		return { CANCEL: this._cancelText.value as string };
    	}

    	actionBarLabel: Overridable = this.i18n.getOverridable("TABLE_TOOLBAR.ACTION_BAR");
    	_cancelText: Overridable = this.i18n.getOverridable("TABLE_TOOLBAR.CANCEL");
    	_batchText: Overridable = this.i18n.getOverridable("TABLE_TOOLBAR.BATCH_TEXT");

    	constructor(protected i18n: I18n) {}

    	get count() {
    		return this.model.totalDataLength > 0 ? this.model.rowsSelected.reduce((previous, current) => previous + (current ? 1 : 0), 0) : 0;
    	}
    	get selected() {
    		return this.model.totalDataLength > 0 ? this.model.rowsSelected.some(item => item) : false;
    	}

    	onCancel() {
    		this.model.selectAll(false);
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""