PhiaUi.Components.TimelineTable (phia_ui v0.1.17)

Timeline / activity log display component.

Renders an ordered list of events with icon dots, timestamps, actors, and optional metadata and expandable detail slots. Uses <ul>/<li> semantics rather than <table> — a better semantic match for chronological event feeds.

Sub-components

Function	HTML element	Purpose
`timeline_table/1`	`<ul>`	Outer container for the event feed
`timeline_table_row/1`	`<li>`	Single timeline event with icon + content

Example

<.timeline_table>
  <.timeline_table_row
    title="Invoice #1042 paid"
    timestamp="2 hours ago"
    icon="circle-check"
    icon_color={:success}
    user="Alice Johnson"
    description="Payment received via Stripe"
  >
    <:meta>
      <.badge variant={:secondary}>$1,200.00</.badge>
    </:meta>
  </.timeline_table_row>

  <.timeline_table_row
    title="Order #889 shipped"
    timestamp="Yesterday"
    icon="truck"
    icon_color={:primary}
  >
    <:detail>
      <div class="text-sm text-muted-foreground">
        Tracking: 1Z999AA10123456784
      </div>
    </:detail>
  </.timeline_table_row>

  <.timeline_table_row
    title="Payment failed"
    timestamp="3 days ago"
    icon="circle-x"
    icon_color={:destructive}
    description="Card ending in 4242 was declined."
  />
</.timeline_table>

Summary

Functions

timeline_table(assigns)

Renders the outer timeline container.

timeline_table_row(assigns)

Renders a single timeline event row.

Functions

timeline_table(assigns)

Renders the outer timeline container.

Uses flow-root to contain floats and divide-y divide-border to draw subtle separators between events. Wraps all timeline_table_row/1 children.

Example

<.timeline_table>
  <.timeline_table_row title="Event A" timestamp="now" />
  <.timeline_table_row title="Event B" timestamp="1h ago" />
</.timeline_table>

Attributes

class (:string) - Additional CSS classes for the outer wrapper. Defaults to nil.

Slots

inner_block (required) - timeline_table_row/1 children.

timeline_table_row(assigns)

Renders a single timeline event row.

The layout is a two-column flex row: icon dot on the left, content on the right. The timestamp floats to the top-right of the content column.

Example

<.timeline_table_row
  title="Deployment succeeded"
  timestamp="5 min ago"
  icon="rocket"
  icon_color={:success}
  user="CI/CD Bot"
  description="v2.4.1 deployed to production"
>
  <:meta>
    <.badge>v2.4.1</.badge>
    <.badge variant={:outline}>production</.badge>
  </:meta>
</.timeline_table_row>

Attributes

timestamp (:string) (required) - Formatted timestamp string (e.g. "2 hours ago", "Mar 5, 2026").
icon (:string) - Lucide icon name for the event dot (e.g. "check", "truck", "circle-x"). Defaults to "circle".
icon_color (:atom) - Colour preset for the icon dot background and icon colour:
- :default — muted background, muted-foreground icon
- :primary — primary-tinted background, primary icon
- :success — green background and icon
- :warning — amber background and icon
- :destructive — destructive/red background and icon
Defaults to :default. Must be one of :default, :primary, :success, :warning, or :destructive.
title (:string) (required) - Primary event label (e.g. "Invoice paid", "Order shipped").
description (:string) - Optional one-line detail beneath the title. Defaults to nil.
user (:string) - Optional actor name displayed as by <user> below the description. Defaults to nil.
class (:string) - Additional CSS classes for the <li>. Defaults to nil.

Slots

meta - Optional metadata badges or chips displayed below the description.
detail - Optional expanded detail block (nested table, code, etc.) below the main content.