Remove dropdown arrow on vuetify data table header?

Question

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...

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':

Answer 1

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 }"
>

Answer 2

First, I'm pretty sure that you can access this <i> icon tag with css, because the fact that some element will get created dynamically does not preventing it to be affected by your css.

Sure your css could get overridden because of Vuetify css, according to the rules of specificity. I would suggest beginning with add a class property to the <v-data-table>, to allow you to specify the css for the tag something like that:

.my-datatable-class .datatable thead th.column.sortable i {
    display: none;
}

It's different if you are using scoped style, this, and more about css specificity is covered here, thanks @Traxo

Anoter option is to implement the whole header section of the data-table by yourself, which is allowed by Vuetify using scoped-slots example of how to do it is in the examples, look for the Slot: items and headers and there at the template code you can see the <v-icon small>arrow_upward</v-icon> thing, just implement the headers omitting that, and there you go without css, adding something like that into your <v-data-table>:

<template slot="headers" slot-scope="props">
  <tr>
    <th
      v-for="header in props.headers"
      :key="header.text"
      :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
      @click="changeSort(header.value)"
    >
      {{ header.text }}
    </th>
  </tr>
</template>