# EuiTableSortableColComponent

**Type:** component

<p>Component used internally by <code>eui-table</code> to make a column sortable.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;table euiTable [data]=&quot;data&quot; (sortChange)=&quot;onSortChange($event)&quot;&gt;
    &lt;ng-template euiTemplate=&quot;header&quot;&gt;
        &lt;tr&gt;
            &lt;th isSortable sortOn=&quot;id&quot;&gt;Id&lt;/th&gt;
            &lt;th isSortable sortOn=&quot;country&quot;&gt;Country&lt;/th&gt;
            &lt;th isSortable sortOn=&quot;year&quot;&gt;Year&lt;/th&gt;
            &lt;th isSortable sortOn=&quot;iso&quot;&gt;ISO&lt;/th&gt;
            &lt;th isSortable sortOn=&quot;population&quot;&gt;Population&lt;/th&gt;
            &lt;th isSortable sortOn=&quot;capital&quot;&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;Id&quot;&gt;&lt;span euiBadge&gt;{{ row.id }}&lt;/span&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;
    &lt;/ng-template&gt;
    &lt;ng-template euiTemplate=&quot;footer&quot;&gt;
        &lt;tr&gt;
            &lt;td class=&quot;eui-u-text-center&quot; colspan=&quot;6&quot;&gt;Footer&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; },
]

onSortChange(e: Sort[]) {
    console.log(e);
}</code></pre></div>

**Selector:** `th[isSortable]`

**Standalone:** false

## Inputs

- **defaultOrder**: `boolean` - <p>Whether the column is sorted by default.</p>

- **isMultiSortable**: `boolean` - <p>Whether the sorting of the column can be cumulated with the one of other column.</p>

- **sortDisabled**: `boolean` - <p>Whether the sort is disabled on the column.</p>

- **sortOn**: `string` - 
- **sortOrder**: `SortOrder` - 
