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

Index

Methods
Inputs
HostBindings
Accessors

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
getcssClasses()

Computes and returns the CSS classes for the component based on its current state.

Returns : string

results matching ""

    No results matching ""