eui documentation
  1. Components
  2. EuiTableSortableColComponent

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
Methods
Inputs
HostBindings
Accessors

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"

Returns the aria-sort value based on current sort order for accessibility.
class
Type : string

Computes and returns the CSS classes for the component based on its current state.

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
getcssClasses()

Computes and returns the CSS classes for the component based on its current state.

Returns : string
ariaSort
getariaSort()

Returns the aria-sort value based on current sort order for accessibility.

Returns : "ascending" | "descending" | "none"

results matching ""

    No results matching ""