SplitButton inside DataTable.

[Abnaberth]

Hi,

I already have some items in MenuModel's array and need to apply it to give some actions in each table row. How is possible to SplitButton trigger DataTable row selection and pass this data correctly to command MenuModel?

Code: Select all

<DataTable
	...
>
	...
	<Column>
		<template #body="{ data }">
			<SplitButton
				label="..."
				:model="menu"
				class="..."
			/>
		</template>
	</Column>
</DataTable>
{
	...,
  	data () {
  		return {
  			menu: [
  				{
  					label: 'Show Details', icon: 'pi pi-fw pi-search', command: event => console.log(event)
  				}
  			]
  		}
  	}
}

[wisdom-17]

Hi @Abnaberth

Did you manage to figure this out? If so, can you share your solution please.

I am trying to accomplish this at the moment but can't find much resource online. Appreciate if you have anything to share.

[SilverStrange]

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.