# EuiTableSortableColComponent

**Type:** component



Component used internally by `eui-table` to make a column sortable.

### Basic Usage
```html
<table euiTable [data]="data" (sortChange)="onSortChange($event)">
    <ng-template euiTemplate="header">
        <tr>
            <th isSortable sortOn="id">Id</th>
            <th isSortable sortOn="country">Country</th>
            <th isSortable sortOn="year">Year</th>
            <th isSortable sortOn="iso">ISO</th>
            <th isSortable sortOn="population">Population</th>
            <th isSortable sortOn="capital">Capital city</th>
        </tr>
    </ng-template>
    <ng-template let-row euiTemplate="body">
        <tr>
            <td data-col-label="Id"><span euiBadge>{{ row.id }}</span></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>
    </ng-template>
    <ng-template euiTemplate="footer">
        <tr>
            <td class="eui-u-text-center" colspan="6">Footer</td>
        </tr>
    </ng-template>
</table>
```
Typescript logic
```ts
data: Country[] = [
    { id: 1, country: 'Belgium', year: 1958, iso: 'BE', population: 11198638, capital: 'Brussels' },
]

onSortChange(e: Sort[]) {
    console.log(e);
}
```


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

## Inputs
- **defaultOrder**: `boolean` - Whether the column is sorted by default.
- **isMultiSortable**: `boolean` - Whether the sorting of the column can be cumulated with the one of other column.
- **sortDisabled**: `boolean` - Whether the sort is disabled on the column.
- **sortOn**: `string` - 
- **sortOrder**: `SortOrder` -