### File

`packages/components/eui-table/sortable-col/eui-table-sortable-col.component.ts`

### Description

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

### Basic Usage

Example :

    <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

Example :

    data: Country[] = [
        { id: 1, country: 'Belgium', year: 1958, iso: 'BE', population: 11198638, capital: 'Brussels' },
    ]

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

### Implements

`OnInit` `OnDestroy`

### Metadata

selector | `th[isSortable]`
imports | `TranslateModule` `EUI_ICON` `EUI_BUTTON` `EUI_ICON_BUTTON`
templateUrl | `./eui-table-sortable-col.component.html`

### Index

###### Properties
euiDropdown Public isSorted Public order Public sortedIndex
###### Methods
Public changeSort Public onDropdownItemClick
###### Inputs
defaultOrder isMultiSortable sortDisabled sortOn sortOrder
###### HostBindings
attr.aria-sort class
###### Accessors
cssClasses ariaSort

### Inputs

defaultOrder
Type : `boolean`
Default value : `false`
Whether the column is sorted by default.

isMultiSortable
Type : `boolean`
Default value : `false`
Whether the sorting of the column can be cumulated with the one of other column.

sortDisabled
Type : `boolean`
Default value : `false`
Whether the sort is disabled on the column.

sortOn
Type : `string`

sortOrder
Type : `SortOrder`
Default value : `'asc'`

### HostBindings

attr.aria-sort
Type : `"ascending" | "descending" | "none"`

class
Type : `string`

### Methods

Public changeSort
`changeSort()`
Handles the click event on the sortable column. Returns : `void`

Public onDropdownItemClick
`onDropdownItemClick(order: SortOrder)`
Handles the click event on the dropdown item when the column is multi-sortable. Parameters :
Name | Type | Optional | Description
order | `SortOrder` | No | An array of SortOrder. See SortOrder
Returns : `void`

### Properties

euiDropdown
Type : `EuiDropdownComponent`
Decorators : `@ViewChild('euiDropdown')`

Public isSorted
Type : `unknown`
Default value : `false`

Public order
Type : `SortOrder`
Default value : `'none'`

Public sortedIndex
Type : `number`
Default value : `null`

### Accessors

cssClasses
get `cssClasses()`
Computes and returns the CSS classes for the component based on its current state. Returns : `string`

ariaSort
get `ariaSort()`
Returns the aria-sort value based on current sort order for accessibility. Returns : `"ascending" | "descending" | "none"`

# results matching ""

# No results matching ""