Implementing Row Highlighting in a Vuetify Simple Table Component

Question

Implementing Row Highlighting in a Vuetify Simple Table Component

Currently diving into the Vutify documentation to explore v-simple-table and v-data-table, wondering if there's a way to implement row highlighting similar to v-data-table.

For reference:

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

This is how my table body is structured:

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

(...rest of the original code...)

                      </template>
                    </td>
    
                  </template>
                </tr>
              </tbody>
            </table>

While I can currently hover over a row to display hover effects, my goal is to enable changing the background color of a row upon selection through a click event.

I'm aiming for an outcome akin to this example, adapted to work with a simple table:

javascript vue.js vuejs2 vuetify.js

Answer 1

Answer №1

Here is a Vue-focused solution...

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 index = this.selected.indexOf(i)
        if (index > -1) {
            this.selected.splice(index, 1);   
        }
        else {
            this.selected.push(i)
        }
    },
  }

Answer 2

Here is a Vue-focused solution...

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 index = this.selected.indexOf(i)
        if (index > -1) {
            this.selected.splice(index, 1);   
        }
        else {
            this.selected.push(i)
        }
    },
  }

Implementing Row Highlighting in a Vuetify Simple Table Component

Answer №1

Similar questions

Creating a dynamic form that efficiently captures user information and automatically redirects to the appropriate web page

Using AngularJS to filter options in a dropdown list and trigger a function with ng-change

Why isn't the Full Calendar loading automatically within a Bootstrap Tab?

Managing multiple to-do lists within a React application using parent-child relationships

Tips for implementing picker options to limit the starting date in the Element UI date-picker

Problem with opening the keyboard feature in an Ionic app

searching backwards using regular expressions

Different methods for dynamically altering the style attribute

Is it common practice to provide a callback function as a parameter for an asynchronous function and then wrap it again?

Is the memory usage of node.js proportional to the number of concurrent requests, or is there a potential memory leak?

Mastering the art of Puppeteer with Javascript

Unable to utilize a function within a mongoose schema

How can I use the select2 jQuery plugin with the tags:true option to ensure that selected choices do not appear again in the dropdown menu?

The challenges encountered with JSONP/Ajax Script - displaying 'Undefined'

Show a modal when the axios request is finished

Steps to make a pop-up window for text copying by users

The node server is experiencing difficulties connecting to the mysql database, resulting in a timed out connection error at Connection._handleConnectTimeout

evaluate individual methods within a stateless component with unit testing

What is the best way to retrieve the chosen table row (tr) in this situation?

Styling with the method in React is a beneficial practice