Skip to main content

TimelineHeaderBar

<ui5-timeline-header-bar> | Since 2.22.0

The ui5-timeline-header-bar component provides search, filter, and sort functionality for the ui5-timeline component. It is designed to be slotted into the header-bar slot of the Timeline.

Usage​

The component fires events (search, filter, sort) that the application should handle to filter/sort the timeline items. The Timeline component itself does not perform any filtering or sorting - this is the responsibility of the application.

ES6 Module Import​

import "@ui5/webcomponents-fiori/dist/TimelineHeaderBar.js";

Filter and Sort​

Combined (Search + Filter + Sort + Filter Info Bar)​

The ui5-timeline-header-bar exposes a filterInfoBar slot where the application can show active filter information with a clear action. The component provides the styled container; the application controls the content entirely.

Properties​

filterBy​

DescriptionThe current filter category label.
Typestring
Default""

searchValue​

DescriptionThe current search value.
Typestring
Default""

showFilter​

DescriptionShows the filter button.
Typeboolean
Defaultfalse

showFilterByDate​

DescriptionShows the filter by date option.
Typeboolean
Defaultfalse

showSearch​

DescriptionShows the search input field.
Typeboolean
Defaultfalse

showSort​

DescriptionShows the sort button.
Typeboolean
Defaultfalse

sortOrder​

DescriptionThe current sort order.
Type"Ascending" | "Descending" (value descriptions in: TimelineSortOrder)
Default"Ascending"

Slots​

default​

DescriptionFilter options to display in the filter dialog.
TypeArray<TimelineFilterOption>

filterInfoBar​

DescriptionDefines the content displayed below the toolbar as a filter info bar.
Use this slot to show active filter summary information along with a clear action. The application controls the content entirely.
TypeArray<HTMLElement>
Since2.23.0

Events​

filter​

DescriptionFired when the user changes filter selection.
TypeCustomEvent<TimelineHeaderBarFilterEventDetail>
ParametersfilterBy: string
The filter category.
selectedOptions: Array<string>
The selected filter option texts.
BubblesYes
CancelableNo

search​

DescriptionFired when the user performs a search.
TypeCustomEvent<TimelineHeaderBarSearchEventDetail>
Parametersvalue: string
The search value entered by the user.
BubblesYes
CancelableNo

sort​

DescriptionFired when the user changes sort order.
TypeCustomEvent<TimelineHeaderBarSortEventDetail>
ParameterssortOrder: string
The sort order ("Ascending" or "Descending").
BubblesYes
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

CSS Custom States​

No CSS custom states available for this component.