DataTable UI component

Purpose

DataTable is a data display component. Dense records table. Use for repeated records with events and status.

Inputs

Field Required Type Behavior
columns yes array of {key,label,component} key and label required; each cell reads row[key]. A custom component receives {value,row,column}.
rows yes array or Go value Projected view-model records. Rows need stable id only when row events are present.
rowEvents no event item array Same item shape as EventBar: non-empty label plus exactly one of onClick or href. Click items run the callback; source identity identifies the row and event item, and rows need stable id. Link-only items may omit row id. Row links use Go expressions or template forms such as /notes/{row.id}; row id: n1 resolves to /notes/n1.
empty no slot node or string Rendered when rows is empty; default is no rows message.

Boundary

Rows are projected view models: product-owned display objects with only the fields the table needs. They are not raw provider DTOs, so provider-only fields and permission details stay outside the table.

Example

package notesui

var notes = []NoteRow{
  {ID: "note-1", Title: "Evidence note", Status: "review"},
}

var noteColumns = []DataColumn{
  {Key: "title", Label: "Note"},
  {Key: "status", Label: "Status", Component: StatusPill},
}

var noteRowEvents = []EventItem{
  {Label: "Open", OnClick: openNote},
}

var notesTable = (
  <DataTable
    rows={notes}
    columns={noteColumns}
    rowEvents={noteRowEvents}
  ></DataTable>
)

Runtime Terms

Expression children document ordinary Go expressions inside markup bodies.

Row link URLs must be same-origin paths or host-allowlisted https: URLs. Reject javascript:, data:, path traversal, and credential-bearing URLs.

UI framework index

Sources