Data Table: Selection & Actions

Row selection with checkboxes, bulk actions, and per-row action menus.

Row Selection

Add enableRowSelection and use helper.selection() for a checkbox column:

Bulk Actions

When rows are selected, bulk action buttons appear in the toolbar:

import type { BulkActionOption } from '@meldui/vue'

// `action` receives the IDs (per `getRowId`) of every selected row across
// all pages. Server-paginated data means full row data isn't available for
// rows on other pages — resolve IDs against your own source when needed.
const bulkActions: BulkActionOption<User>[] = [
  {
    label: 'Delete',
    icon: IconTrash,
    variant: 'destructive',
    action: async (ids) => {
      await api.delete('/users', { ids })
      refetch()
    },
  },
  {
    label: 'Export CSV',
    icon: IconDownload,
    action: async (ids) => {
      const users = await api.fetchUsers({ ids })
      exportToCsv(users)
    },
  },
]

Per-Row Actions

Use helper.actions() for row-level action menus:

const columns = [
  helper.accessor('name', { title: 'Name' }),
  helper.accessor('email', { title: 'Email' }),
  helper.actions({
    display: 'dropdown', // or 'inline'
    actions: [
      {
        label: 'Edit',
        icon: IconPencil,
        onClick: (row) => router.push(`/users/${row.id}/edit`),
      },
      {
        label: 'Delete',
        icon: IconTrash,
        variant: 'destructive',
        onClick: (row) => deleteUser(row.id),
        // Conditionally show/disable
        show: (row) => row.role !== 'admin',
        disabled: (row) => row.status === 'inactive',
      },
    ],
  }),
]

Accessing Selection State

Via template ref:

const tableRef = ref()

// Get selected row data
const selected = tableRef.value?.selectedRows // User[]
const count = tableRef.value?.selectedRowCount // number
const hasAny = tableRef.value?.hasSelection // boolean

// Clear selection
tableRef.value?.resetSelection()