### File

`packages/components/eui-table/selectable-header/eui-table-selectable-header.component.ts`

### Description

Component used internally by `eui-table` to add a 'select all' checkbox in the header of the table.

### Basic Usage

Example :

    <table euiTable [data]="data" (rowsSelect)="onRowsSelect($event)">
        <ng-template euiTemplate="header">
            <tr isHeaderSelectable>
                <th>Country</th>
                <th>Year</th>
                <th>ISO</th>
                <th>Population</th>
                <th>Capital city</th>
            </tr>
        </ng-template>
        <ng-template let-row euiTemplate="body">
            <tr [isDataSelectable]="row">
                <td data-col-label="Country">{{ row.country }}</td>
                <td data-col-label="Year">{{ row.year }}</td>
                <td data-col-label="ISO">{{ row.iso }}</td>
                <td data-col-label="Population">{{ row.population | number }}</td>
                <td data-col-label="Capital city">{{ row.capital }}</td>
            </tr>
        </ng-template>
    </table>

Typescript logic

Example :

    data: Country[] = [
        { id: 1, country: 'Belgium', year: 1958, iso: 'BE', population: 11198638, capital: 'Brussels' },
    ]

    onRowsSelect(selected: Country[]): void {
        console.log(selected);
    }

### Implements

`OnInit` `OnDestroy`

### Metadata

selector | `tr[isHeaderSelectable]`
imports | `EUI_INPUT_CHECKBOX`
templateUrl | `./eui-table-selectable-header.component.html`

### Index

###### Properties
Public isChecked Public isCheckedIndeterminate
###### Methods
Public toggleCheckedState
###### Inputs
isHeaderSelectable
###### Accessors
ariaLabel

### Inputs

isHeaderSelectable
Type : `boolean`
Default value : `true`
Whether select all features are available in the header.

### Methods

Public toggleCheckedState
`toggleCheckedState(e: Event)`
Handle the change of the selected status. Parameters :
Name | Type | Optional | Description
e | `Event` | No | Change Event
Returns : `void`

### Properties

Public isChecked
Type : `unknown`
Default value : `false`

Public isCheckedIndeterminate
Type : `unknown`
Default value : `false`

### Accessors

ariaLabel
get `ariaLabel()`
Gets the `aria-label` attribute for the checkbox element. Returns : `string`

# results matching ""

# No results matching ""