RecordTimeline
The records of the ambient <List> as a dated activity list, one entry per record in list order. The timeline fetches nothing: put it inside a <ReferenceManyField> or a <List>, whose sort sets the order. Each entry shows the messageSource text, an icon, and optionally the userSource and the time. The time is relative ("2 hours ago"), from Intl.RelativeTimeFormat, with the full date in the tooltip and the ISO date in dateTime; an entry with no valid date leaves it out. iconSource picks an icon from icons, and an entry with no match shows a clock. It is computed at render and does not tick while the page stays open.
Installation
pnpm dlx shadcn@latest add @chelone/record-timelineThe records of the ambient <List> as a dated activity list, one entry per record in list order. The timeline fetches nothing: put it inside a <ReferenceManyField> or a <List>, whose sort sets the order. Each entry shows the messageSource text, an icon, and optionally the userSource and the time. The time is relative ("2 hours ago"), from Intl.RelativeTimeFormat, with the full date in the tooltip and the ISO date in dateTime; an entry with no valid date leaves it out. iconSource picks an icon from icons, and an entry with no match shows a clock. It is computed at render and does not tick while the page stays open.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | |
| empty | ReactNode | — | Rendered with no records, in place of the translated "No activity yet". |
| icons | Record<string, ComponentType<{ className?: string }>> | — | Icons by the value of `iconSource`. An entry with no match shows a clock. |
| iconSource | SourceProp<TRecord> | — | The field whose value picks an entry of `icons`. |
| loading | ReactNode | — | Rendered while the list is pending, in place of `SimpleListLoading`. |
| messageSource | SourceProp<TRecord> | — | The field printed as the entry's text; a dotted path reads a nested value. |
| timestampSource | SourceProp<TRecord> | — | The field holding the entry's date. An invalid or missing date leaves the time out. |
| userSource | SourceProp<TRecord> | — | The field holding who did it. Without it, or with no value, the entry shows no user. |