Timeline

Import via Module

import { Timeline } from 'primereact/timeline';
 

Import via CDN

<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/timeline/timeline.min.js"></script>
 

Getting Started

Timeline receives the events with the value property as a collection of arbitrary objects. In addition, content property is required to display the representation of an event. Example below is a sample events array that is used throughout the documentation.

const events = [
    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
];
 

<Timeline value={events} content={(item) => item.status} />
 

Layout

Default layout of the timeline is vertical, setting layout to "horizontal" displays the items horizontally.

<Timeline value={events} layout="horizontal" content={(item) => item.status} />
 

Alignment

Location of the timeline bar is defined using the align property.

<Timeline value={events} align="right" content={(item) => item.status} />
 

In addition, the "alternate" alignment option make the contents take turns around the timeline bar.

<Timeline value={events} align="alternate" content={(item) => item.status} />
 

Opposite

Content to be placed at the other side of the bar is defined with the opposite property.

<Timeline value={events} opposite={(item) => item.status} content={(item) => <small className="p-text-secondary">{item.date}</small>} />
 

Custom Markers

marker property allows placing a custom event marker instead of the default one. Below is an example with custom markers and content.

<Timeline value={events} marker={(item) => <i className={item.icon}></i>} content={(item) => item.status}} />
 

Properties

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Accessibility

This section is under development. After the necessary tests and improvements are made, it will be shared with the users as soon as possible.

Dependencies

None.