Pass custom text to datatable "Sort by" select label

1
votes

I'm using the Vuetify datatable for my project. Based on the sample from the docs

https://vuetifyjs.com/en/components/data-tables/#usage

if you toggle to a device screen size the component will render a select for item sorting:

enter image description here

I want to pass a customized for the "Sort by" text. I was able to figure out how to customize most of the texts

no-data-text="My custom no data text"
no-results-text="My custom no results text"
:footer-props="{
  showFirstLastPage: true,
  itemsPerPageText: 'My custom items per page',
  itemsPerPageOptions: [10, 20, -1],
  itemsPerPageAllText: 'My all text',
  pageText: '{0} - {1} of {2}'
}"

but I wasn't able to figure out where to pass in a custom text for this "Sort by" label. Would someone mind telling me how to customize that?

1
javascriptvue.jsvuetify.js
Looks like no way to translate by props. create-a-translation: vuetifyjs.com/en/customization/internationalization/…. – Ezra Siton
Thanks but I don't need to know how to translate it, I just need to find out how to customize that text via prop – Question3r
"i just" again no way (The text come from the component). I hope you find simpler answer (Maybe open github issue) – Ezra Siton

1 Answers

4
votes

Reading source code led me to this:
Html:
:header-props="headerProps"

Data:

headerProps: {
        sortByText: 'Custom sort by'
},

Demo

But they should've documented it. I couldn't find it in their official documents either.