# EuiTableSelectableHeaderComponent

**Type:** component



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

### Basic Usage
```html
<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
```ts
data: Country[] = [
    { id: 1, country: 'Belgium', year: 1958, iso: 'BE', population: 11198638, capital: 'Brussels' },
]

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


**Selector:** `tr[isHeaderSelectable]`

## Inputs
- **isHeaderSelectable**: `boolean` - Whether select all features are available in the header.