VVibeFlui

Row Selection and Bulk Actions

Row selection enables checkbox selection and bulk action workflows.

Explicit row selection

TS
table: {
  rowSelection: {
    enabled: true,
    mode: "multiple"
  }
}

mode can be:

  • single
  • multiple

Automatic row selection

If actions.bulk contains actions, VibeFlui enables row selection automatically unless table.rowSelection is false.

TS
table: {
  rowSelection: false
}

Bulk actions

TS
export const usersSchema = {
  resource: "users",
  identity: {
    key: "id"
  },
  table: {
    rowSelection: true
  },
  actions: {
    bulk: [
      {
        key: "archive",
        label: "Archive selected",
        variant: "secondary",
        handler: "users.archive",
        refreshOnSuccess: true
      }
    ]
  },
  registry: {
    actionHandlers: ["users.archive"]
  }
} as const;

Bulk action handlers receive selected row data in values:

TS
{
  values: {
    selectedRows,
    selectedIds
  }
}

selectedIds is resolved from schema.identity.key.

Bulk action state

Bulk action buttons are disabled when no rows are selected.

The toolbar displays a selected row count when bulk actions exist.

Events

Selection emits rowSelected.

Bulk actions emit:

  • actionClicked
  • actionSucceeded
  • actionFailed