No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    [SOLVED] Action button in DataTable

    Help
    8
    12
    8800
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • AGPDev
      AGPDev last edited by AGPDev

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

      TKS.

      1 Reply Last reply Reply Quote 0
      • D
        damosse31 last edited by

        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 1 Reply Last reply Reply Quote 0
        • AGPDev
          AGPDev @damosse31 last edited by

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

          1 Reply Last reply Reply Quote 0
          • druppy
            druppy last edited by

            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 F 2 Replies Last reply Reply Quote 0
            • AGPDev
              AGPDev @druppy last edited by

              @druppy Thanks works perfect

              1 Reply Last reply Reply Quote 0
              • S
                shanemgrey last edited by

                @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>
                
                1 Reply Last reply Reply Quote 0
                • F
                  Fernando2684 last edited by Fernando2684

                  This post is deleted!
                  1 Reply Last reply Reply Quote 0
                  • F
                    Fernando2684 @druppy last edited by

                    This post is deleted!
                    1 Reply Last reply Reply Quote 0
                    • maximilianfixl
                      maximilianfixl last edited by

                      This post is deleted!
                      1 Reply Last reply Reply Quote 0
                      • D
                        danielo515 last edited by

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

                        benoitranque 1 Reply Last reply Reply Quote 0
                        • benoitranque
                          benoitranque @danielo515 last edited by

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

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

                          Precisely

                          D 1 Reply Last reply Reply Quote 0
                          • D
                            danielo515 @benoitranque last edited by

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

                            1 Reply Last reply Reply Quote 1
                            • First post
                              Last post