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