### File

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

### Description

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

### 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` `OnChanges`

### Metadata

selector | `tr[isDataSelectable]`
imports | `FormsModule` `EUI_INPUT_CHECKBOX`
templateUrl | `./eui-table-selectable-row.component.html`

### Index

###### Methods

- Public toggleCheckedState

###### Inputs

- isChecked
- isDataSelectable
- isKeyboardSelectable
- isSingleSelectable

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

isChecked
Type : `boolean`
Default value : `false`
Wheter the row is selected.

isDataSelectable
Type : `DATA`
Data of the row.

isKeyboardSelectable
Type : `boolean`
Default value : `false`
Wheter the selection can be done with the keyboard.

isSingleSelectable
Type : `boolean`
Default value : `false`
Wheter only one row is selectable.

### HostBindings

class
Type : `string`
Computes and returns the CSS classes for the component based on its current state.

### 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`

### Accessors

cssClasses
get `cssClasses()`
Computes and returns the CSS classes for the component based on its current state. Returns : `string`

# results matching ""

# No results matching ""