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

    q-table rows drag and drop

    Framework
    q-table drag
    7
    11
    2382
    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.
    • C
      claudiofbezerra last edited by

      q-table rows drag and drop? I’m trying without success so far. Has anyone ever got it?

      1 Reply Last reply Reply Quote 0
      • C
        chyde90 last edited by

        I once tried it with q-table without success and would like to know if it’s possible, too.

        My plan-b was to use a standard <table> and https://www.npmjs.com/package/vuedraggable to wrap the <tr> elements.
        That was before Quasar v1, so nowadays I would use QMarkupTable.

        But it would be nicer to be able to use it in a QTable, of course.

        I’m not saying it is impossible - I just gave up quickly…

        1 Reply Last reply Reply Quote 0
        • C
          chyde90 last edited by

          I just tried again and I still can’t do it. I think I have an explanation why it doesn’t work… Let me show you my approach:

          As a starting point I looked at the example at: https://quasar.dev/vue-components/table#Body-slots

          <q-table ... >
             <template v-slot:body="props">
                <q-tr :props="props">
                   <q-td key="name" :props="props"> ...  </q-td>
                   ...
                </q-tr>
             </template>
          </q-table>
          

          So I thought I could just replace the <q-tr> with the <draggable> tag from the Drag&Drop-library and configure it to render as a <q-tr>. Like this:

          <q-table ... >
             <template v-slot:body="props">
                <draggable
                  :props="props"
                  tag="q-tr"
                  ...>
                   <q-td key="name" :props="props"> ... </q-td>
                   ...
                </draggable>
             </template>
          </q-table>
          

          Now here is why this won’t work:
          The <q-tr> and the body-slot don’t correspond to the <tr> and <tbody> elements that are rendered in the DOM in the end.
          The drag-functionality actually gets attached to the cells instead of the rows!

          The only way I see that this could work is if we somehow can render the individual rows (the actual <tr> elements) with a v-for by ourself.

          1 Reply Last reply Reply Quote 0
          • C
            coopersamuel last edited by

            This is a bummer - any thoughts on this from the quasar folks?

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

              What about the @chyde90 code but with QMarkupTable?

              1 Reply Last reply Reply Quote 0
              • C
                coopersamuel last edited by

                I need the features of QTable

                1 Reply Last reply Reply Quote 0
                • C
                  chyde90 last edited by

                  There is a way, but it requires some work…
                  The library I like to use for drag & drop (vuedraggable) is actually just a wrapper for Sortable.js to make it work with vue.js.
                  You could simply use Sortable.js (or something similar) and make it work with vue.js in your own way.

                  <q-table
                      ...
                      id="myTable"
                  >
                  
                  import Sortable from "sortablejs";
                  
                  mounted() {
                     const element = document.querySelector("#myTable tbody"); // grab the element containing the <tr> elements
                     const sortable = Sortable.create(element, {
                        onEnd(event) { // gets called when dragging ended
                           // Sortable.js only swaps the elements in the DOM,
                           // so we need to swap the elements in the table data using the indexes (event.oldIndex and event.newIndex) or probably better by using ids if you have pagination
                        }
                     });
                  }
                  

                  And then you also need to somehow notify Sortable.js when your data changes (after sorting, on pagination, etc.).
                  I don’t see an update() or refresh() function in the documentation, so you might have to call destroy() and re-initialize Sortable again every time, but idk.

                  … something like that.

                  A 1 Reply Last reply Reply Quote 0
                  • mesqueeb
                    mesqueeb last edited by

                    I recently found this very promising vue library to add drag and drop functionality:
                    https://github.com/kutlugsahin/smooth-dnd

                    It seems very easy and powerful.
                    Just throwing it out here.

                    M 1 Reply Last reply Reply Quote 1
                    • A
                      ascendant @chyde90 last edited by ascendant

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

                        This post is deleted!
                        1 Reply Last reply Reply Quote 0
                        • M
                          mecjos @mesqueeb last edited by

                          @mesqueeb is it usable with qtable??

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