Posting here because this is what I found when trying to add a button menu to rows in my DataTable.
I didn't want to use the context menu integration because from a UX perspective I don't like commands that are only available through right clicking.
I ended up not using SplitButton and instead used Menu triggered by a button, but the concept is similar. You can't pass parameters to commands in a MenuApi items array, but you can track the active row via callbacks on the button, then let the command reference that saved value.
Code: Select all
<Column headerStyle="min-width: 10rem">
<template #body={data}>
<Button
aria-controls="options-menu"
aria-haspopup="true"
class="p-button-raised p-button-text"
@click="optionsButtonClick($event, data)"
label="Options"
icon="pi pi-fw pi-cog"
iconPos="left"
></Button>
</template>
</Column>
Outside the DataTable (you only need one instance since options are the same for each row).
Code: Select all
<Menu
id="options-menu"
:model="menuItems"
:popup="true"
ref="menuRef"
>
Inside setup() (for composition API):
Code: Select all
const menuRef = ref()
const menuItems = ref([
{ label: 'Enter Payment', icon: 'pi pi-credit-card', command: () => viewProduct(selectedItem) }
])
const selectedItem= ref()
const optionsButtonClick = (event, data) => {
// hide the menu if it is already open on another button
if (selectedItem.value !== undefined && selectedItem.value.id !== data.id) {
menuRef.value.hide()
}
// toggle the menu on the clicked button
nextTick(() => {
// update selectedItem for use in commands
selectedItem.value = props.itemData.find(item => item.id === data.id)
menuRef.value.toggle(event)
})
}
const viewProduct = (item) => {
console.log(item.value.id)
}
This code is a bit rudimentary but should give you the idea for the solution.
As a reminder, even if you are not using it for actual navigation, all PrimeVue menu components expect you to have Vue-Router installed and will complain if it is not found.