Bus UI Data Display

Timeline keeps event history in order.

Use it for audit trails, work progress, or other ordered histories. Each item can carry escaped body text or a trusted body node, plus timestamps and metadata.

Public API

Timeline(p TimelineProps) gx.Node

The input model is TimelineProps with TimelineItem and TimelineMeta entries. The helper returns HTML as a string.

When to use it

Use Timeline when the order itself matters and each entry needs a status, time, and optional supporting metadata. The node-first path rejects raw HTML in the body field.

Live demo

Loading Timeline demo...

Example

Go API

import (
  gx "github.com/busdk/bus-gx/pkg/gx"
  ui "github.com/busdk/bus-ui/pkg/ui"
)

node := ui.Timeline(ui.TimelineProps{
  Label: "Invoice workflow",
  Items: []ui.TimelineItem{
    {
      Time:   "2026-06-14T09:00:00Z",
      Body:   "Invoice imported",
      Status: ui.TimelineStatusSuccess,
    },
    {
      Time:   "2026-06-14T09:10:00Z",
      Body:   "Provider error reviewed",
      Status: ui.TimelineStatusWarning,
    },
  },
})

html, err := gx.RenderHTML(node)

.gx source

In .gx source, author the visible component state as GX markup. Keep the Go API block above for the package helper or render-boundary call.

package busuiexamples

import gx "github.com/busdk/bus-gx/pkg/gx"

func TimelineExample() gx.Node {
  return <ol class="timeline">
  <li><Text value={"File received"}></Text></li>
  <li><Text value={"Projection completed"}></Text></li>
</ol>
}

Use the public pkg/ui facade for this timeline surface.