How to customize data table action buttons in Vuetify
I wanted to have my own action buttons for the v-data-table compared to the example provided, as indicated below.
Mine needed to be separate action buttons, and also be color coded, as indicated by “Edit” and “Delete” columns below. This helps with users with not so tiny fingers. ;)
Assumptions
I will assume that you know how to create v-data-tables in Vuetify, if not, the provided documentation is worth the read.
Reproduction
I added 2 columns, one named “edit” and the other named “delete” to the headers collection of the v-data-table. These have events linked to them and this get passed the data-table row being clicked. To customize how these columns look, we will use the item slot of the data-table. This has been done like this.
The Edit Column
<v-template v-slot:item.edit="{ item }"><v-btn :loading="item.loading" elevation="0" icon color="green" v-on:click="tblchallenges_edit(item)">
<v-icon dark>mdi-pencil</v-icon>
</v-btn></template>
I decided to also bind the loading property as I might decide to turn the loading indicator on / off during the execution of the web application. I can also change the button elevation if needs be. On each Edit button click event, the registered tblchallenges_edit event is called, which receives the row being clicked.
The Delete Column
<template v-slot:item.delete="{ item }"><v-btn :loading="item.loading" elevation="0" icon color="red" v-on:click="tblchallenges_delete(item)"><v-icon dark>mdi-delete</v-icon>
</v-btn></template>
As you might have noticed, the code here is not so different from the edit column code. On each Delete button click event, the registered tblchallenges_delete event is called, which receives the row being clicked.
What I do is then show a v-dialog to provide a prompt for the respective actions. One can also use the beautiful Sweet Alerts library for the dialogs.
You can follow me on Twitter @mashymbanga, LinkedIn (https://www.linkedin.com/in/anele-mashy-mbanga-4b639376/), on Github (https://github.com/Mashiane)
Happy Vuetify Coding.
