packages/components/eui-table/selectable-row/eui-table-selectable-row.component.ts
Component used internally by eui-table to make a row selectable.
<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);
}
| selector | tr[isDataSelectable] |
| imports |
FormsModule
EUI_INPUT_CHECKBOX
|
| templateUrl | ./eui-table-selectable-row.component.html |
Methods |
|
Inputs |
HostBindings |
Accessors |
| 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. |
| class |
Type : string
|
|
Computes and returns the CSS classes for the component based on its current state. |
| Public toggleCheckedState | ||||||||
toggleCheckedState(e: Event)
|
||||||||
|
Handle the change of the selected status.
Parameters :
Returns :
void
|
| cssClasses |
getcssClasses()
|
|
Computes and returns the CSS classes for the component based on its current state.
Returns :
string
|