File

packages/components/eui-table/selectable-header/eui-table-selectable-header.component.ts

Description

Component used internally by eui-table to add a 'select all' checkbox in the header of the table.

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

Metadata

Index

Properties
Methods
Inputs
Accessors

Inputs

isHeaderSelectable
Type : boolean
Default value : true

Whether select all features are available in the header.

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

Properties

Public isChecked
Type : unknown
Default value : false
Public isCheckedIndeterminate
Type : unknown
Default value : false

Accessors

ariaLabel
getariaLabel()

Gets the aria-label attribute for the checkbox element.

Returns : string

results matching ""

    No results matching ""