Timeline

The Timeline component displays a visual timeline of events, with dates, times, and statuses. The events within the Timeline may be sorted and grouped.

For more information on how to use the features and props for this component, check out the developer documentation.

The Timeline component displays a list of activity objects in either ascending or descending order. The order is defined by the sortOrder prop and is set to desceding by default. The Timeline component also expects a currentTime to be provided so that proper styling may be applied to each activity item as they relate to the present day. Items with solid lines between them have transpired in the past whereas items with dashed lines between them are to occur in the future.

Each activity item represents an event along the Timeline and should include a unique id, a title, and a date. The date is used to order the event within the Timeline, and provide a timestamp for users to see beside the event. They may optionally include a status with variant and children as defined per the Status badge component. Each event may also include an icon that will render alongside the title. The icon prop will accept any default Cosmos Icon, or any custom icon that has been properly registered. For more information on registering custom icons, visit the Icon documentation.

If an event includes content, an action will render alongside the title for users to expand that event and view the provided content. The content may come in the form of a FieldValueList, or any other React Node. The display of the content is powered by the ExpandCollapse component.

Grouping

By default, the Timeline activity will be grouped by date. However, you may configure this component to also group by monthyear, quarteryear, year, or none via the groupBy prop. If any value other than none is passed, the activity will visually group together with titles of each group being automatically generated by the DateTimeDisplay component.

NameTypeDefaultDescription
activity*ActivityObject[]List of activity
currentTime*DateCurrent time as Date
classNamestringAdditional CSS classes.
groupByTimelineGroupBy"date" List of activity grouped by day, month, quarter or year.
loadMore() => voidCallback to fetch more activity items
loadingbooleanfalse Show a Progress indicator at the end of a list where newly loaded items will be appended.
refRef<HTMLTableElement>Ref for the wrapping element.
sortOrderTimelineSortOrder"descending" List of activity sorted in ascending or descending order.