How can i change label "Sort by" in Vuetify's data table?

user_12138189 0
Viewed 1298

The label is visible only in the mobile view at the top of the v-data-table. I've read the documentation and there's no such a prop that can modify the "Sort by" label.

vuetify.js vue.js javascript
1 Answers

We can easily do this by adding headerProps to the data option like:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headerProps: {
        sortByText: "Custom Sort By Text"
      },
      headers: [
        //...
      ],
      items: [
        //...
      ]  
    }
  },
})

and then updating the template like:

<v-data-table
  :headers="headers"
  :items="items"
  :items-per-page="5"
  class="elevation-1"
  :header-props="headerProps"
>      
</v-data-table>

Now, in mobile view instead of showing default "Sort by" label, it will show "Custom Sort By Text" and you can modify it as you need.

user_18238410
Related