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
Data-Driven Timeline (KeenMate Pattern)
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! Timeline with Load More (Pagination)
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" isFilled> 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)