### 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
    		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> items selected
    			</p>
    		</div>
    	</div>
    	<ng-content></ng-content>
    </section>

### Index

###### Properties

- _cancelText
- actionBarLabel

###### Methods

- onCancel

###### Inputs

- ariaLabel
- cancelText
- model

###### Accessors

- ariaLabel
- cancelText
- count
- selected

### Constructor

`constructor(i18n: I18n)`
Defined in src/table/toolbar/table-toolbar.component.ts:77

Parameters :

Name | Type | Optional
i18n | `I18n` | No

### Inputs

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

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

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

### Methods

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

### Properties

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

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

### Accessors

ariaLabel
set `ariaLabel(value: literal type)`
Defined in src/table/toolbar/table-toolbar.component.ts:67

Parameters :

Name | Type | Optional
value | `literal type` | No

Returns : `void`

cancelText
get `cancelText()`
Defined in src/table/toolbar/table-toolbar.component.ts:73
set `cancelText(value: literal type)`
Defined in src/table/toolbar/table-toolbar.component.ts:70

Parameters :

Name | Type | Optional
value | `literal type` | No

Returns : `void`

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

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

    import { TableModel } from "../table-model.class";
    import { Component, Input } 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
    			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> items selected
    				</p>
    			</div>
    		</div>
    		<ng-content></ng-content>
    	</section>
    	`
    })
    export class TableToolbar {
    	@Input() model: TableModel;

    	@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 = this.i18n.getOverridable("TABLE_TOOLBAR.ACTION_BAR");
    	_cancelText = this.i18n.getOverridable("TABLE_TOOLBAR.CANCEL");

    	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() {
    		for (let i = 0; i < this.model.rowsSelected.length; i++) {
    			this.model.selectRow(i, false);
    		}
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""