Change background-color on hover for v-data-table

Question

I have a v-data-table with 5 columns and I'd like to change the color when the user hovers one line. Does anyone know how to do it ? Right now, the whole table is in dark grey and the hover is a ligh grey, I'd like the hover color to be orange.

<v-data-table
  :loading="enableLoadingCircle"
  :footer-props="{ 'items-per-page-options': [50, 100, 250, -1] }"
  dense
  dark
  :fixed-header="fixedHeader"
  calculate-widths
  :height="windowSize.y - 63 - 60"
  :headers="headers"
  :items="res"
  class="elevation-0"
  sort-by="publicationDate"
  :sortDesc= "sortVal"
  :no-data-text="loadingMessage"
  :loading-text="loadingMessage"
>
  <v-progress-linear slot="progress"
    v-if="enableLoadingCircle == true"
    height="3"
    indeterminate
    :color=yellow
  ></v-progress-linear>

  <!-- VIDEO column -->
  <template #item.video="{ item }">
    <a
      target="_blank"
      v-if="item.video != ''"
      :href="item.video"
    >
      <v-btn dark icon>
        <v-icon>
          mdi-movie
        </v-icon>
      </v-btn>
    </a>
  </template>
  <!-- TITLE column -->
  <template #item.title2="{ item }">
    <a
      target="_blank"
      v-if="item.file != ''"
      :href="item.file"
    >
      <span>
        {{ item.title }}
      </span>
    </a>
  </template>
</v-data-table>

That's actually what I'm trying to do but even after inspecting the element, I can't seem to figure out which class to change in the css — Quentin, Sep 21 '22 at 09:31
https://forum.vuejs.org/t/vuetify-styling-data-table-next/105133/5 Is this help? — vicnoob, Sep 21 '22 at 09:32
It will be something like: ` .theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) { background: #eee; } ` (I copy from the data-table documentation) — vicnoob, Sep 21 '22 at 09:33

score 0 · Answer 1 · answered Sep 21 '22 at 09:37

So I guess your question is how to find the right class to override the style with v-data-table? If it's true, here is how to inspect it

Then you see how the row is specify, can base on that to override the style. Ref: Styling vuetify v-data-table. Would be something like:

.theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) { background: #eee; }

Change background-color on hover for v-data-table

1 Answers1