Add an Popup Action Button to a Grid Row

Environment

Description

This Knowledge base article shows how we can add an action button to the rows of the Native Grid component. Using this action button, we can control the data state of the Grid or change the look of the component.

Solution

The way we define the action button in the Grid column is through the cell column property. The custom template passed to this property is defined as follows:

Copy Code<template v-slot:myTemplate="{props}">
	<custom :data-item="props.dataItem" 
		@actionselect="actionSelected"
		/>
</template>

The definition of the custom component can be seen in the ActionCell.vue file in the below example.

Runnable example