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

If you don't mind sorting, add `sortable: false` to your `headers` items : `headers: [ { text: 'ID', value: 'Id', sortable: false }, . . . ]` — Toodoo, Oct 16 '18 at 08:05
Great idea, thanks! That removed the arrows. But I mind sorting :( — J. Wu, Oct 16 '18 at 08:14
See [this answer](https://stackoverflow.com/a/50985784/1981247) to understand why you are unable to target it, and how to actually target it. — Traxo, Oct 16 '18 at 08:32
@NatiMask Odds are that they are using scoped style because OP said `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.`, this indicates to me that they know how to actually target it via CSS, but something is not working. And even if they aren't using scoped styles, other things such as specificity are covered. That should be enough to properly target any element. If something is not clear or covered, feedback is welcome (there). — Traxo, Oct 16 '18 at 08:36

David Gay · Accepted Answer · 2020-05-26T17:20:44.223

15

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

edited May 26 '20 at 17:20

answered May 26 '20 at 17:14

David Gay

1,094
2
16
32

Nati Mask · Answer 2 · 2021-10-07T09:21:14.477

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>

No such word as "overrided". It's "overridden". – GeneC Sep 19 '21 at 23:39 — GeneC, Sep 19 '21 at 23:39

score 2 · Answer 3 · answered Jun 22 '21 at 01:59

2

use sortable option false to the necessary columns

ex-:

headers: [{ text: 'Name', value: 'name', sortable: false },
          { text: 'Date', value: 'date', sortable: false }]

answered Jun 22 '21 at 01:59

Kaumadie Kariyawasam

1,232
3
17
35

score 1 · Answer 4 · answered Apr 03 '20 at 09:11

1

It is not needed to write any custom CSS. Just possible to use provided vuetify property

sort-icon

It is enough to provide the value of sort-icon as false. It will hide sorting icon of all columns, as I see it is what you need.

<v-data-table
    :headers="headers"
    :items="items"
    :sort-icon="false"
  >

answered Apr 03 '20 at 09:11

Don D

726
1
9
19

1

This method has been removed. Now you should use `header-props`, as shown in my answer: https://stackoverflow.com/a/62027761/1196465 – David Gay May 26 '20 at 17:16
@DavidGay In the verion I have tested it was working fine. It was "bootstrap": "4.4.1", "bootstrap-vue": "2.9.0". Thanks for pointing out. – Don D May 26 '20 at 19:18
No worries, I think you may have gotten confused: This question is about Vuetify (https://vuetifyjs.com/), not BootstrapVue, which is a different component framework (https://bootstrap-vue.org/). – David Gay May 26 '20 at 19:50
Oh my bad. My answer was from vuetify. But mistakenly my comment is from bootstrap-vue. I work with both and mistakenly swapped them in the comment. :D And for the vuetify I was referring to 1.5.x and it seems to be removed in vuetify 2. – Don D May 26 '20 at 20:43

Remove dropdown arrow on vuetify data table header?

4 Answers4