Color-coded Events
- 09:00 AMSystem startup initialized
- 09:15 AMDatabase connection established successfully
- 09:30 AMRunning scheduled maintenance tasks
- 10:00 AMHigh memory usage detected (85%)
- 10:15 AMCritical error in payment processor - investigation required
- 10:30 AMPayment processor issue resolved
- 11:00 AMSystem backup completed
- 11:30 AMNew deployment scheduled for 2:00 PM
Filled Bullets
- Jan 2025Project kickoff meeting with stakeholders
- Feb 2025Phase 1 development completed
- Mar 2025User acceptance testing in progress
- Apr 2025Performance optimization required before launch
- May 2025Production deployment scheduled
Timeline populated from database/API data with member mappings and callbacks
Using Callbacks for Transformation
Click items to view details. Critical items get 🚨 prefix via callback.
- 09:00 AMSystem startup initialized
- 09:15 AMDatabase connection established successfully
- 09:30 AMRunning scheduled maintenance tasks
- 10:00 AMHigh memory usage detected (85%)
- 10:15 AM🚨 CRITICAL: Critical error in payment processor - investigation required
- 10:30 AMPayment processor issue resolved
Callbacks = Simple Transformations: Use
getVariantCallback to map your data's status field to timeline colors. Use getContentCallback to transform messages (like adding prefixes). For complex
rendering, use templates instead! Data-driven timeline with pagination - showing 5 of 12 activities
- 2 hours agoUser Sarah Johnson completed onboarding process
- 3 hours agoNew feature request submitted: Dark mode toggle
- 5 hours agoSystem update v2.3.1 deployed successfully
- 1 day agoStorage usage approaching 80% capacity
- 2 days agoMonthly billing cycle completed
Virtual Scroll (Large Dataset)
For very large timelines with hundreds or thousands of events, virtual scrolling can improve performance.
- Event 1Activity log entry #1 - User login
- Event 2Activity log entry #2 - File uploaded
- Event 3Activity log entry #3 - Settings changed
- Event 4Activity log entry #4 - Report generated
- Event 5Activity log entry #5 - Email sent
- Event 6Activity log entry #6 - Task completed
- Event 7Activity log entry #7 - User login
- Event 8Activity log entry #8 - File uploaded
- Event 9Activity log entry #9 - Settings changed
- Event 10Activity log entry #10 - Report generated
- Event 11Activity log entry #11 - Email sent
- Event 12Activity log entry #12 - Task completed
- Event 13Activity log entry #13 - User login
- Event 14Activity log entry #14 - File uploaded
- Event 15Activity log entry #15 - Settings changed
- Event 16Activity log entry #16 - Report generated
- Event 17Activity log entry #17 - Email sent
- Event 18Activity log entry #18 - Task completed
- Event 19Activity log entry #19 - User login
- Event 20Activity log entry #20 - File uploaded
- Event 21Activity log entry #21 - Settings changed
- Event 22Activity log entry #22 - Report generated
- Event 23Activity log entry #23 - Email sent
- Event 24Activity log entry #24 - Task completed
- Event 25Activity log entry #25 - User login
- Event 26Activity log entry #26 - File uploaded
- Event 27Activity log entry #27 - Settings changed
- Event 28Activity log entry #28 - Report generated
- Event 29Activity log entry #29 - Email sent
- Event 30Activity log entry #30 - Task completed
- Event 31Activity log entry #31 - User login
- Event 32Activity log entry #32 - File uploaded
- Event 33Activity log entry #33 - Settings changed
- Event 34Activity log entry #34 - Report generated
- Event 35Activity log entry #35 - Email sent
- Event 36Activity log entry #36 - Task completed
- Event 37Activity log entry #37 - User login
- Event 38Activity log entry #38 - File uploaded
- Event 39Activity log entry #39 - Settings changed
- Event 40Activity log entry #40 - Report generated
- Event 41Activity log entry #41 - Email sent
- Event 42Activity log entry #42 - Task completed
- Event 43Activity log entry #43 - User login
- Event 44Activity log entry #44 - File uploaded
- Event 45Activity log entry #45 - Settings changed
- Event 46Activity log entry #46 - Report generated
- Event 47Activity log entry #47 - Email sent
- Event 48Activity log entry #48 - Task completed
- Event 49Activity log entry #49 - User login
- Event 50Activity log entry #50 - File uploaded
Note: True virtual scrolling with pa-virtual-scroll component is not yet implemented.
This example uses regular scrolling with overflow.
Usage Examples
Basic Timeline
<Timeline variant="simple">
<TimelineItem timeText="09:00 AM" variant="primary">
Event description
</TimelineItem>
<TimelineItem timeText="10:00 AM" variant="success">
Another event
</TimelineItem>
</Timeline>Filled Bullets
<TimelineItem timeText="Jan 2025" variant="primary" filled>
Milestone completed
</TimelineItem>Available Variants
variant="primary"- Blue (default system events)variant="secondary"- Gray (routine events)variant="success"- Green (successful operations)variant="info"- Cyan (informational messages)variant="warning"- Orange (warnings)variant="danger"- Red (errors/critical events)