[SOLVED] Action button in DataTable

AGPDev

Hi, there is a method to include action buttons like Edit and Delete for every row in Data Table Component ?

TKS.

damosse31

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>

AGPDev

@damosse31 but this show button after select, i wont select i need one column with buttons actions

druppy

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 called action and then make a :

<template slot='col-action' scope='cell'>
    <button @click='on_edit(cell)`><i>edit</i></button>
</template>

Hope this helps

AGPDev

@druppy Thanks works perfect

shanemgrey

@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>

Fernando2684

This post is deleted!

Fernando2684

This post is deleted!

maximilianfixl

This post is deleted!

danielo515

But how do you create the column? Just adding it to the array of columns?

benoitranque

@danielo515 said in [SOLVED] Action button in DataTable:

But how do you create the column? Just adding it to the array of columns?

Precisely

danielo515

@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.