# `PhiaUi.Components.TimelineTable`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/data/timeline_table.ex#L1)

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>

# `timeline_table`

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`

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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*