CODEWITHSUNDEEP
vue.jsvuetify.js
captain hak
captain hak

Reputation: 912

How to sort vuetify datatable only on header click?

In a v-data-table, I have one column with a simple text field, this column containing the text field is sortable. The problem is that when I change the value in the text field, the data is immediately re-sorted and in my case the lines change and in the worst case the line change and the focused input changes too, like in this example: codepen reproduction

For reproduction:

Expected behavior:

Is there a way of behaving like in the expected behavior?

Thank you very much for the answers

Upvotes: 1

Views: 1539

Answers (2)

captain hak
captain hak

Reputation: 912

So I found the answer to that, which consist of redefining the header: I use the slot header.iron in order to redefine a sortIron method only on click : basic demo

What I'll have to do next is to redefine arrows, style, 'asc' and 'desc'

I'm still open to other ways of doing it!

But right now I can follow my wanted behavior which is :

  • sort the table via the iron column
  • change one field
  • press tab, on the next field enter a value
  • repeat previous step until you're done
  • finally re-sort the table only by clicking the header

Upvotes: 0

slowFooMovement
slowFooMovement

Reputation: 568

It looks like you should use a different event on the <v-text-field> component to listen for changes instead of using v-model to bind changes automatically to props.items.iron. Text Field Event Docs here

You could do something like using the blur event so it only updates when your user focuses away from the text field:

<v-text-field
  @blur="updateIron"
  :rules="[max25chars]"
  label="Edit"
  single-line
  counter
  autofocus
></v-text-field>

then in your JS file you'd add a method like this:

  methods: {
    // ...other stuff here
    updateIron(val) {
      this.item.iron = val
    }
  }

Try experimenting with different events to update your values at the appropriate time.

Upvotes: 1

Related Questions