# EuiTableExpandableRowDirective

**Type:** directive



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

### Basic Usage
```html
<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
```ts
data: Country[] = [
    { id: 1, country: 'Belgium', year: 1958, iso: 'BE', population: 11198638, capital: 'Brussels' },
]
```


**Selector:** `tr[isExpandableRow]`