Data
DataTimelineFeed
Activity feed timeline with optional date grouping, load-more, and empty state.
Data
Data components handle the rendering of structured information in detail views, sidebars, and list pages. They cover everything from a single formatted number to a full activity feed with date grouping.
Components
<XADataTimelineFeed />
Activity feed timeline that renders user-action entries. Supports optional date-header grouping, a load-more button, and an empty state. Uses an ActivityItem sub-component internally.
<XADataTimelineFeed
:items="activityItems"
group-by-date
date-field="time"
:has-more="hasMore"
:loading-more="loading"
load-more-text="Load more activity"
empty-text="No activity yet"
icon-size="md"
@load-more="loadNextPage"
>
<template #item-actions="{ item }">
<UButton size="xs" icon="i-lucide-reply" variant="ghost" />
</template>
</XADataTimelineFeed>
Each item object shape: { id?, user?: { name, avatar }, action, target?, time, icon?, iconColor?, description? }.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | array | — | Required. Array of activity item objects. |
groupByDate | boolean | false | Group items under sticky date headers. |
dateField | string | 'time' | Item field used as the date key for grouping. |
hasMore | boolean | false | Show the load-more button. |
loadingMore | boolean | false | Show loading spinner on the load-more button. |
loadMoreText | string | 'Load more' | Load-more button label. |
emptyText | string | 'No activity yet' | Empty state message. |
iconSize | 'sm' | 'md' | 'lg' | 'md' | Icon size for each activity item. |
Emits
| Event | Payload | Description |
|---|---|---|
load-more | — | Fired when the user clicks the load-more button. |
Slots
| Slot | Scope | Description |
|---|---|---|
item-actions | { item } | Action buttons rendered on each activity item. |
AI Context
component: XADataTimelineFeed
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Data
use-when: Rendering an activity/audit feed with user-action entries. Supports date grouping (set dateField to match your data), load-more pagination, and per-item action slots.
item-shape: "{ id?, user?: { name, avatar }, action, target?, time, icon?, iconColor?, description? }"