[SOLVED] Action button in DataTable
-
Hi, there is a method to include action buttons like Edit and Delete for every row in Data Table Component ?
TKS.
-
Hi,
please look here you have examples with template :
<template slot="selection" scope="selection"> <button class="primary clear" @click="yourEditMethod"> <i>edit</i> </button> <button class="primary clear" @click="yourDeleteMethod"> <i>delete</i> </button> </template>
-
@damosse31 but this show button after select, i wont select i need one column with buttons actions
-
This is done using this column format
The
col-column
scoped slot is a brillian Vue feature, used inside DataTable, that will allow you for highly customized cell rendering.Make a
column
calledaction
and then make a :<template slot='col-action' scope='cell'> <button @click='on_edit(cell)`><i>edit</i></button> </template>
Hope this helps
-
@druppy Thanks works perfect
-
@druppy Thank you for this solution. I used it to create a router link to the id of the data in the cell by creating a method to route, and using the cell.row.id to pass the id to the router.
routeToReport: function (id) { router.push('/view/' + id) },
<template slot='col-select' scope='cell'> <button class="primary" @click='routeToReport(cell.row.id)'>View</button> </template>
-
This post is deleted! -
This post is deleted! -
This post is deleted! -
But how do you create the column? Just adding it to the array of columns?
-
@danielo515 said in [SOLVED] Action button in DataTable:
But how do you create the column? Just adding it to the array of columns?
Precisely
-
@benoitranque I already noticed (see my other posts about this). Mi mistake was not including them on the list of visible columns. By the way, for me it will be a blacklist functionality rather than a whitelist one.