eui documentation
  1. Directives
  2. EclTableHeaderDirective

File

packages/ecl/components/ecl-table/ecl-table.directive.ts

Extends

ECLBaseDirective

Implements

AfterContentInit OnInit

Metadata

Selector [eclTableHeader]

Index

Properties
Methods
Inputs
Outputs
HostBindings
HostListeners
Accessors

Inputs

eclSortable
Type : any
Default value : null

Enables sorting on the header. Also sets the data-ecl-table-sort-toggle attribute. Acts as the unique identifier for the column when sorting.
id
Type : string

HTML id attribute of the table header cell. If not provided, a UUID will be generated.
scope
Type : string
Default value : 'col'

Scope of the table header. Default is col. Sets the scope attribute.
sortButtonAriaLabel
Type : string

Aria-label for the sort button that will be injected into the header cell.
class
Type : string
e2eAttr
Type : any
tabindex
Type : number

Outputs

sort
Type : EventEmitter

Emits an EclSortTableEvent when the header is clicked and sorting is triggered.

HostBindings

attr.aria-sort
Type : SortOrder
Default value : null

Current sort order of the column (ascending, descending, or null). This sets the aria-sort attribute used for accessibility.
class
Type : string

Computes the CSS classes applied to the header element.

HostListeners

click
Arguments : '$event'

Handles click events on the header. Cycles through sort orders: null -> ascending -> descending -> null. Emits a EclSortTableEvent with the updated sort state and column identifier.

Click triggers 1 -> asc sorting, 2 -> desc sorting then 3 -> initial sorting

Methods

onClick
onClick(evt: Event)
Decorators :
@HostListener('click', ['$event'])

Handles click events on the header. Cycles through sort orders: null -> ascending -> descending -> null. Emits a EclSortTableEvent with the updated sort state and column identifier.

Click triggers 1 -> asc sorting, 2 -> desc sorting then 3 -> initial sorting

Parameters :
Name Type Optional
evt Event No
Returns : void
removeAriaSort
removeAriaSort()

Clears the aria-sort attribute, used to visually and semantically reset previous sort state.

Remove the dark arrow for current sorting from prev sorted column

Returns : void
getCssClasses
getCssClasses(rootClass: string)
Parameters :
Name Type Optional
rootClass string No
Returns : string

Properties

sortOrder
Type : SortOrder
Default value : null
Decorators :
@HostBinding('attr.aria-sort')

Current sort order of the column (ascending, descending, or null). This sets the aria-sort attribute used for accessibility.

Accessors

cssClasses
getcssClasses()

Computes the CSS classes applied to the header element.

Returns : string

results matching ""

    No results matching ""