Row Actions - Media Manager

Row Actions

Row actions add interactive buttons and menu items to each row in the media table. They are configured via rowActions inside context.

settings: {
  context: {
    type: 'myMedia',
    rowActions: {
      buttons: [ /* inline buttons, visible on each row */ ],
      menu: [ /* items in the three-dot (⋮) dropdown */ ],
    },
  },
}

The buttons and menu arrays are independent — an action can appear in both, neither, or just one.

Built-in Actions

Select

Wires a callback that fires when a user picks a media item:

settings: {
  context: {
    type: 'myMedia',
    rowActions: {
      buttons: [
        { type: 'select', onClick: (row) => console.log('Selected:', row) },
      ],
    },
  },
}

There is no separate onRowSelected runtime method — selection is handled exclusively through rowActions.buttons.

Delete

Removes the media entry, showing a confirmation prompt first:

rowActions: {
  buttons: [{ action: 'delete' }],
}

Detach

Removes an entry from the current category (only applicable in category context; the entry itself is not deleted):

rowActions: {
  menu: [{ action: 'detach', label: 'Remove from category' }],
}

Both built-in actions accept an optional label property to override default text.

Custom Actions

You can add any action with your own label and click handler:

rowActions: {
  menu: [
    { type: 'custom', label: 'Copy ID', onClick: (row) => navigator.clipboard.writeText(row.id) },
    { type: 'custom', label: 'Preview', onClick: (row) => window.open(row.thumbnailUrl) },
  ],
}

Combining Everything

rowActions: {
  buttons: [
    { type: 'select', onClick: (row) => handleSelect(row) },
    { action: 'delete' },
  ],
  menu: [
    { action: 'detach', label: 'Remove from category' },
    { type: 'custom', label: 'Copy ID', onClick: (row) => navigator.clipboard.writeText(row.id) },
  ],
}

Action Types Reference

Shape	Where	Description
{ type: 'select', onClick }	buttons	Row selection callback
{ action: 'delete', label? }	buttons or menu	Built-in delete with confirmation
{ action: 'detach', label? }	buttons or menu	Remove from category (category context only)
{ type: 'custom', label, onClick }	buttons or menu	Any custom action you define