Detail Layout

Detail layout controls the read-only surface opened by view/detail actions.

Basic detail config

export const usersSchema = {
  resource: "users",
  detail: {
    enabled: true,
    mode: "modal",
    title: "User Detail",
    width: "3xl",
    grid: {
      columns: {
        base: 1,
        md: 2
      }
    },
    fields: [
      { key: "name", label: "Name" },
      { key: "email", label: "Email" },
      { key: "role.name", label: "Role" },
      { key: "status", label: "Status", renderer: "StatusBadge" }
    ]
  },
  registry: {
    renderers: ["StatusBadge"]
  }
} as const;

Defaults

Detail fields fallback

When detail.fields is missing:

1. VibeFlui derives detail fields from table.columns when table columns exist.
2. Otherwise, VibeFlui derives detail fields from form.fields.

Hidden table columns are skipped. Hidden, hidden-input, and password form fields are skipped.

Value formatting

• Empty values render as -.
• Boolean values render as Yes or No.
• Object values render as formatted JSON.
• renderer resolves from registry.renderers.