Vuetify v-simple-table Highlight Selected Row

Question

Been reading the docs in Vutify for their v-simple-table and v-data-table and I am trying to figure out if there is a way to add a row highlight like you can for a v-data-table.

Such as this?

Vuetify - How to highlight row on click in v-data-table

My table body looks like this:

<v-simple-table dense fixed-header height="90vh" >
            <template v-slot:default>
              <thead >
              <tr >
                <th style="font-size: 16px;height: 40px;" width='4%' class="black--text">
                  Location
                </th>
                <template v-if="Object.keys(arrAvailableDates).length">
                  <th style="font-size: 17px; " class="text-center black--text" v-for="(strDate, intIndex) in arrAvailableDates" :key="intIndex">
                    <span> {{ $moment(strDate).format('D MMM (ddd)') }}</span>
                    <v-badge  tile v-if="total[strDate] > 0" inline color="green" v-bind:content="total[strDate]" > </v-badge>
                  </th>
                </template>
                <template v-else>
                  <th class="text-center" v-for="intHeaderCounter in 6" :key="intHeaderCounter">
                    <v-skeleton-loader
                      :key="intHeaderCounter"
                      type='text'
                    ></v-skeleton-loader>
                  </th>
                </template>

              </tr>
              </thead>

    <tbody v-if="!blnLoading">
                  <template v-if="Object.keys(arrFiltered).length" >
                    <tr class="teal lighten-5"
                        v-for="(arrData, strLocationName) in arrFiltered"
                        :key="'f-' + strLocationName"
    
                    >
                      <th class="black--text text-darken--3">
                        {{ strLocationName }} <br/><span class="caption">{{arrData['zip']}}</span>
                      </th>
    
                      <template v-for="(arrAppointmentData, strDate) in arrData['appointment']">
                        <td :key="strDate" class="text-center ma-0 pa-0" >
                          <template v-if="typeof(arrAppointmentData) == 'object' ">
                              <span class="time-slot-x-small" v-for='(intCount, intIndex) in arrAppointmentData' :key="intIndex">
                                  {{ $moment(intIndex, ["HH:mm:ss"]).format('hh:mma')}}
                                  <span class="dot">{{intCount}}</span>
                                </span>
                          </template>
                          <template v-else>
                            -
                          </template>
                        </td>
    
                      </template>
                    </tr>
                  </template>

I can hover a row and it will show that the row is been hover but I am trying to create a way where if I click on the row, it will change the background color when selected.

An example I am trying to mirror is like this but with a simple table: https://www.codeply.com/p/hi40H9aug9

Zim Zim · Accepted Answer · 2020-11-12T13:19:11

Here is a more Vue centric approach...

template:

   <tbody>
        <tr
          v-for="(item,idx) in items"
          :key="item.name"
          @click="handleClick(idx)"
          :class="{ selected: selected.includes(idx) }"
        >
          <td>{{ item.name }}</td>
          <td>{{ item.calories }}</td>
        </tr>
   </tbody>

script:

  data () {
    return {
      items: [
        {
          id: 1,
          name: "Frozen Yogurt",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: "1%",
        },
      ],
      selected: [],
    }
  },
  methods: {
    handleClick(i) {
        let pos = this.selected.indexOf(i)
        if (pos > -1) {
            this.selected.splice(pos, 1);   
        }
        else {
            this.selected.push(i)
        }
    },
  }

https://codeply.com/p/PaV3dwWk1j

Vuetify v-simple-table Highlight Selected Row

1 Answers