[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 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 :-)



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

Log in to reply
 

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