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


  • Hi,

    please look here you have examples with template :

    <template slot="selection" scope="selection">
        <button class="primary clear" @click="yourEditMethod">
        <button class="primary clear" @click="yourDeleteMethod">

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

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

    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>

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.