### File

`packages/components/eui-table/directives/eui-table-expandable-row.directive.ts`

### Description

Directive used to activate the expandable feature on a row of the table.

### Basic Usage

Example :

    <table euiTable [data]="data">
        <ng-template euiTemplate="header">
            <tr>
                <th aria-hidden="true"></th>
                <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>
                <td data-col-label="Click to expand/collapse">
                    <eui-icon-button
                        size="s"
                        [icon]="!row.expanded ? 'eui-chevron-right' : 'eui-chevron-down'"
                        [aria-label]="row.expanded ? 'Collapse row for ' + row.country : 'Expand row for ' + row.country"
                        (click)="row.expanded = !row.expanded;" />
                </td>
                <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>
            \@if(row.expanded) {
                <tr isExpandableRow>
                    <td colspan="6" class="p-3">
                        <h4 class="eui-u-text-h4">Expanded row content for {{ row.country }}</h4>
                        <div class="row">
                            <div class="col-md-3">
                                <span class="eui-flag-icon eui-flag-icon-{{ row.iso.toLowerCase() }} eui-flag-icon-5x"></span>
                            </div>
                            <div class="col-md-9">
                                <span>Capital city : <strong>{{ row.capital }}</strong></span><br>
                                <span>Population : <strong>{{ row.population | number }}</strong></span><br>
                                <span>Year : <strong>{{ row.year }}</strong></span><br>
                            </div>
                        </div>
                    </td>
                </tr>
            }
        </ng-template>
    </table>

Typescript logic

Example :

    data: Country[] = [
        { id: 1, country: 'Belgium', year: 1958, iso: 'BE', population: 11198638, capital: 'Brussels' },
    ]

### Implements

`OnInit`

### Metadata

Selector | `tr[isExpandableRow]`

### Index

###### Properties
string
###### HostBindings
class
###### Accessors
isOpen

### HostBindings

class
Type : `string`
Default value : `'eui-table-expandable-row'`

### Properties

string
Type : `string`
Default value : `'eui-table-expandable-row'`
Decorators : `@HostBinding('class')`

### Accessors

isOpen
get `isOpen()`

# results matching ""

# No results matching ""