# EuiTableSelectableRowComponent

**Type:** component

<p>Component used internally by <code>eui-table</code> to make a row selectable.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;table euiTable [data]=&quot;data&quot; (rowsSelect)=&quot;onRowsSelect($event)&quot;&gt;
    &lt;ng-template euiTemplate=&quot;header&quot;&gt;
        &lt;tr isHeaderSelectable&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 [isDataSelectable]=&quot;row&quot;&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;
    &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; },
]

onRowsSelect(selected: Country[]): void {
    console.log(selected);
}</code></pre></div>

**Selector:** `tr[isDataSelectable]`

**Standalone:** false

## Inputs

- **isChecked**: `boolean` - <p>Wheter the row is selected.</p>

- **isDataSelectable**: `DATA` - <p>Data of the row.</p>

- **isKeyboardSelectable**: `boolean` - <p>Wheter the selection can be done with the keyboard.</p>

- **isSingleSelectable**: `boolean` - <p>Wheter only one row is selectable.</p>

