Components
Activity timeline
Activity timeline
Alternating left/right timeline grouped by day, with sticky day headers and sticky author avatars. Designed for incremental rendering — pass continuation state on the model so appended pages keep the same author on the same side and never duplicate the day header.
Canonical
Today
Yesterday
<koala-activity-timeline model="@Model.Timeline" />The most-used shape. Each author groups on one side of the line. A new author flips the side; day boundaries reset the day-header sticky behaviour but preserve the alternation.
Variants
3 variants
Today
Yesterday
Default
ShowEntityLink=true
Today
Visibility icons
ShowVisibilityIcons=true
Today
Scoped
ShowEntityLink=false
States
1 state
Today
Yesterday
Default
Stateless renderer. Sticky behaviour kicks in when the parent scroll container moves.
Props
ActivityTimelineModel| Property | Type | Notes |
|---|---|---|
| Days | IReadOnlyList<ActivityTimelineDay> | One group per day, newest-first. |
| ShowEntityLink | bool | Hides the entity link on detail pages already scoped to one entity. |
| ShowVisibilityIcons | bool | Adds client / partner audience icons next to each timestamp. |
| StickyHeader | ActivityTimelineSticky | Top12 drops the sticky offset under a tab strip; None sits flush. |
| PreviousDate | DateOnly? | Continuation state from a prior batch; suppresses a duplicate day header. |
| PreviousUserId | Guid? | Continuation state; decides whether the first row starts a new person-group. |
| PreviousPersonGroupIndex | int? | Continuation state; keeps the side alternation in step. |
Do & don't
Today
Yesterday
Do
Pass the continuation state on load-more renders so the appended batch joins seamlessly with the prior one.
- Jane Carter accepted the quote
- Marcus Webb created the quote
- Marcus Webb set the referrer
Don't
Don't render activity as a flat list. The author grouping and day header are what make "what happened here" scannable.