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'

const bulkActions: BulkActionOption<User>[] = [
  {
    label: 'Delete',
    icon: IconTrash,
    variant: 'destructive',
    action: (selectedRows) => {
      // selectedRows is User[]
      deleteUsers(selectedRows.map((r) => r.id))
    },
  },
  {
    label: 'Export CSV',
    icon: IconDownload,
    action: (selectedRows) => exportToCsv(selectedRows),
  },
]

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()