Actions

Using the actions prop, the appearance and interactivity of the table can be enhanced with click controls, overflow menus and expandable rows

menu

Each item will contain a menu button, which, when clicked, will launch a menu for that item. This menu can be configured using the item-menu slot, as in the example below

<NioSlatTable 
	:items="computeItems" 
	:columns="computeColumns" 
	action="menu">
	<template v-slot:item-menu="slotProps">
		<v-list>
			<v-list-item @click="menuItemClicked('updateBudget', slotProps.item)">
				Update budget
			</v-list-item>
			<!-- etc... -->
		<v-list>
	</template>
</NioSlatTable>	

link

Each item will contain a link icon, and a click on the item will trigger an itemClicked event with the item clicked as the $event object

<NioSlatTable 
	:items="computeItems" 
	:columns="computeColumns" 
	@itemClicked="itemClicked($event)"
	action="link">
</NioSlatTable>	

expand

Clicking an item will show an expansion panel under the item, which can be configured using the item-expanded slot

<NioSlatTable 
	:items="computeItems" 
	:columns="computeColumns" 
	action="expand">
	<template v-slot:item-expanded="slotProps"> 
		<div>
			{{ slotProps.item }}
		</div>	
	</template>
</NioSlatTable>