# EuiTableExpandableRowDirective

**Type:** directive

<p>Directive used to activate the expandable feature on a row of the table.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;table euiTable [data]=&quot;data&quot;&gt;
    &lt;ng-template euiTemplate=&quot;header&quot;&gt;
        &lt;tr&gt;
            &lt;th aria-hidden=&quot;true&quot;&gt;&lt;/th&gt;
            &lt;th&gt;Country&lt;/th&gt;
            &lt;th&gt;Year&lt;/th&gt;
            &lt;th&gt;ISO&lt;/th&gt;
            &lt;th&gt;Population&lt;/th&gt;
            &lt;th&gt;Capital city&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template let-row euiTemplate=&quot;body&quot;&gt;
        &lt;tr&gt;
            &lt;td data-col-label=&quot;Click to expand/collapse&quot;&gt;
                &lt;eui-icon-button
                    size=&quot;s&quot;
                    [icon]=&quot;!row.expanded ? &#39;eui-chevron-right&#39; : &#39;eui-chevron-down&#39;&quot;
                    [aria-label]=&quot;row.expanded ? &#39;Collapse row for &#39; + row.country : &#39;Expand row for &#39; + row.country&quot;
                    (click)=&quot;row.expanded = !row.expanded;&quot; /&gt;
            &lt;/td&gt;
            &lt;td data-col-label=&quot;Country&quot;&gt;{{ row.country }}&lt;/td&gt;
            &lt;td data-col-label=&quot;Year&quot;&gt;{{ row.year }}&lt;/td&gt;
            &lt;td data-col-label=&quot;ISO&quot;&gt;{{ row.iso }}&lt;/td&gt;
            &lt;td data-col-label=&quot;Population&quot;&gt;{{ row.population | number }}&lt;/td&gt;
            &lt;td data-col-label=&quot;Capital city&quot;&gt;{{ row.capital }}&lt;/td&gt;
        &lt;/tr&gt;
        \&#64;if(row.expanded) {
            &lt;tr isExpandableRow&gt;
                &lt;td colspan=&quot;6&quot; class=&quot;p-3&quot;&gt;
                    &lt;h4 class=&quot;eui-u-text-h4&quot;&gt;Expanded row content for {{ row.country }}&lt;/h4&gt;
                    &lt;div class=&quot;row&quot;&gt;
                        &lt;div class=&quot;col-md-3&quot;&gt;
                            &lt;span class=&quot;eui-flag-icon eui-flag-icon-{{ row.iso.toLowerCase() }} eui-flag-icon-5x&quot;&gt;&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;col-md-9&quot;&gt;
                            &lt;span&gt;Capital city : &lt;strong&gt;{{ row.capital }}&lt;/strong&gt;&lt;/span&gt;&lt;br&gt;
                            &lt;span&gt;Population : &lt;strong&gt;{{ row.population | number }}&lt;/strong&gt;&lt;/span&gt;&lt;br&gt;
                            &lt;span&gt;Year : &lt;strong&gt;{{ row.year }}&lt;/strong&gt;&lt;/span&gt;&lt;br&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        }
    &lt;/ng-template&gt;
&lt;/table&gt;</code></pre></div><p>Typescript logic</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-ts">data: Country[] = [
    { id: 1, country: &#39;Belgium&#39;, year: 1958, iso: &#39;BE&#39;, population: 11198638, capital: &#39;Brussels&#39; },
]</code></pre></div>

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

**Standalone:** false
