# EuiTableSelectableRowComponent

**Type:** component



Component used internally by `eui-table` to make a row selectable.

### 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[isDataSelectable]`

## Inputs
- **isChecked**: `boolean` - Wheter the row is selected.
- **isDataSelectable**: `DATA` - Data of the row.
- **isKeyboardSelectable**: `boolean` - Wheter the selection can be done with the keyboard.
- **isSingleSelectable**: `boolean` - Wheter only one row is selectable.