Row Actions

Row actions run against a table row.

They receive the selected row, resolved identity value, endpoint params, permission context, and action config.

Built-in row actions

VibeFlui builds row actions from:

Detail/view action when detail.enabled and actions.view.enabled are true.
Edit action when actions.edit.enabled is true.
Delete action when actions.delete.enabled is true.
Custom actions from actions.row.

Schema example

export const usersSchema = {
  resource: "users",
  identity: {
    key: "id",
    param: "id"
  },
  table: {
    columns: ["name", "email", "status"]
  },
  detail: {
    enabled: true,
    fields: ["name", "email", "status"]
  },
  actions: {
    view: {
      enabled: true,
      label: "View",
      icon: "lucide:eye"
    },
    edit: {
      enabled: true,
      label: "Edit",
      icon: "lucide:pencil"
    },
    delete: {
      enabled: true,
      label: "Delete",
      icon: "lucide:trash-2",
      variant: "danger",
      handler: "users.delete",
      confirm: true
    },
    row: [
      {
        key: "approve",
        label: "Approve",
        icon: "lucide:check",
        handler: "users.approve",
        visibleWhen: {
          key: "status",
          operator: "equals",
          value: "pending"
        }
      }
    ]
  },
  registry: {
    actionHandlers: ["users.delete", "users.approve"]
  }
} as const;

Handler context

import { createRegistry } from "@vibeflui/core";

export const registry = createRegistry({
  actionHandlers: {
    "users.approve": async ({ row, identityValue, params }) => ({
      status: true,
      code: 200,
      message: `${String(row?.name ?? identityValue)} approved`,
      data: { id: identityValue, params }
    })
  }
});

Visibility and disabled state

Use visibleWhen to hide an action.

{
  key: "approve",
  visibleWhen: {
    key: "status",
    operator: "equals",
    value: "pending"
  }
}

Use disabledWhen to render the action but block interaction.

{
  key: "invite",
  disabledWhen: {
    key: "emailVerified",
    operator: "notEquals",
    value: true
  }
}