VVibeFlui

Action Grouping

Action grouping keeps dense table rows readable.

When row action grouping is enabled and a row has more than three actions, VibeFlui keeps up to two priority actions visible and moves the rest into a dropdown.

Default behavior

table.actionGrouping defaults to true.

Priority operations:

  1. view/detail
  2. update/edit
  3. delete
  4. first remaining actions until two direct actions are selected

Overflow actions appear in a dropdown triggered by lucide:list-collapse.

Schema example

TS
export const usersSchema = {
  resource: "users",
  table: {
    actionGrouping: true,
    columns: ["name", "email", "status"]
  },
  actions: {
    edit: { enabled: true, label: "Edit", icon: "lucide:pencil" },
    delete: { enabled: true, label: "Delete", icon: "lucide:trash-2", variant: "danger", confirm: true },
    row: [
      { key: "view-audit", label: "Audit", icon: "lucide:history", handler: "users.audit" },
      { key: "invite", label: "Invite", icon: "lucide:send", handler: "users.invite" },
      { key: "archive", label: "Archive", icon: "lucide:archive", handler: "users.archive" }
    ]
  },
  registry: {
    actionHandlers: ["users.audit", "users.invite", "users.archive"]
  }
} as const;

Disable grouping

TS
export const usersSchema = {
  resource: "users",
  table: {
    actionGrouping: false,
    columns: ["name", "email", "status"]
  }
} as const;

When grouping is disabled, all row actions render directly.

Group trigger

The overflow trigger uses lucide:list-collapse and the accessible label More actions.

Visual action rules

Direct row actions render as icon actions. Overflow actions render as button-style menu items.