packages/components/eui-table/selectable-header/eui-table-selectable-header.component.ts
Component used internally by eui-table to add a 'select all' checkbox in the header of the table.
<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[isHeaderSelectable] |
| imports |
EUI_INPUT_CHECKBOX
|
| templateUrl | ./eui-table-selectable-header.component.html |
Properties |
|
Methods |
|
Inputs |
Accessors |
| isHeaderSelectable |
Type : boolean
|
Default value : true
|
|
Whether select all features are available in the header. |
| Public toggleCheckedState | ||||||||
toggleCheckedState(e: Event)
|
||||||||
|
Handle the change of the selected status.
Parameters :
Returns :
void
|
| Public isChecked |
Type : unknown
|
Default value : false
|
| Public isCheckedIndeterminate |
Type : unknown
|
Default value : false
|
| ariaLabel |
getariaLabel()
|
|
Gets the
Returns :
string
|