Mike Cole

Icons In Header Slot In Vuetify Data-Table

07/20/2018 Comment vue vuetify

We've been using Vuetify for a component framework in the Vue project we've been working on the past few months. It's a great framework and I highly recommend it, especially if you're trying to follow Material Design patterns. Today I ran into an issue customizing a grid header that was difficult to solve.

Here's the example on CodePen: https://codepen.io/mikecole/pen/zLNKbG

If you check the header of any column, you can see that I added a second v-icon that will eventually pop open a dropdown menu. However, when sorting the column Vuetify doesn't distinguish that column from the arrow sorting icon, and it spins both of them.

It turns out that there doesn't seem to be any options to disable this, and that the solution seems to be fixing it with stying: ``` ... filter_list ... .v-datatable thead th.column.sortable.active.desc .no-rotate { transform: none !important; } ```

Fixed example on CodePen: https://codepen.io/aldarund/pen/yqgVgy