Search code examples
htmlvue.jsdatatablesassvuetify.js

Remove dropdown arrow on vuetify data table header?

I am struggling to remove the dropdown arrow next to the column names 'Name', 'Datum', 'Creator'... The dropdown arrow gets rendered in an i-Tag, and if I edit the html via Chrome and add 'display: none' it gets removed...

the arrow next to 'Name' etc.

the dropdown arrow tag

however I am unable to access the i tag or the class v-icon via css in the code. Probably because it is not created before the rendering process.

Is there any other way to remove the dropdown arrow?

Thanks in advance!

Html of my table, called 'file-list':

the html

Solution

  • The best way to hide the sort icon is via header-props. For example:

    <v-data-table
  :headers="headers"
  :items="items"
  :header-props="{ sortIcon: null }"
>