CODEWITHSUNDEEP
vue.jsdrag-and-dropquasar-frameworkquasarvuedraggable
Rohit K
Rohit K

Reputation: 21

can anybody tell me how we can make the q-table rows draggable in quasar

I have tried with vuedraggable package and quasar-ui-q-draggable-table package but it is not working in q-table quasar.

The vuedraggable package is widely used for drag and drop operations in Vue.js applications but might not seamlessly integrate with specific UI components like q-table in Quasar due to differences in implementation and requirements.

I want to acheive drag and drop functionality on q-table. If anyone knows, then please I will thankful to them.

Upvotes: 2

Views: 352

Answers (1)

tailor
tailor

Reputation: 31

quasar-ui-q-draggable-table package can work with rows. To do this, set mode: 'row' . With some settings, such as virtual-scroll, dragging does not work, since new tags are added inside table. Example

<template>
  <q-page padding>
    <q-table
      v-draggable-table="{
        options: {
          mode: 'row',
          onlyBody: true
        },
        onDrop: onDropRow,
      }"
      v-model:pagination="pagination"
      title="Drag rows"
      :rows="rows"
      :columns="columns"
      row-key="name"
    />
  </q-page>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const columns = ref([
      {
        name: 'name',
        required: true,
        label: 'Dessert (100g serving)',
        align: 'left',
        field: row => row.name,
        format: val => `${val}`,
        sortable: true
      },
      { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
      { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
      { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
      { name: 'protein', label: 'Protein (g)', field: 'protein' },
      { name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
      { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
      { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }
    ])
    const rows = ref([
      {
        name: 'Frozen Yogurt',
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        sodium: 87,
        calcium: '14%',
        iron: '1%'
      },
      {
        name: 'Ice cream sandwich',
        calories: 237,
        fat: 9.0,
        carbs: 37,
        protein: 4.3,
        sodium: 129,
        calcium: '8%',
        iron: '1%'
      },
    ])
    const pagination = ref(null)
    return {
      columns,
      rows,
      pagination
    }
  },
  methods: {
    onDropRow(from, to) {
      const offset = (this.pagination.page - 1) * this.pagination.rowsPerPage
      this.rows.splice(offset + to - 1, 0, this.rows.splice(offset + from - 1, 1)[0]);
    },
  }
}
</script>

Please note package does not redraw original component, but only represents indexes of elements being moved. Use onDrop hook to redraw.

More examples here.

If the package does not work, write here I will answer there more quickly

Upvotes: 0

Related Questions