How do I highlight a table row on click in Vuejs?

Question

I would like to highlight a table row on '@click' in Vuejs. Currently I'm having an issue getting this to work.

Here is my html template where I'm binding class active to the Boolean 'isActive'.

<table
      class="paginatedTable-table hide-table">
      <thead class="paginatedTable-table-head">
        <tr :class="{active: isActive}" class="paginatedTable-table-head-row">
          <th
            v-for="(column, key) in columns"
            :key="key"
            :class="column.align"
            class="paginatedTable-table-head-row-header"
            @click="sortTable(column)">
            {{ column.label }}
            <i
              v-if="sortOptions.currentSortColumn === column.field"
              :class="sortOptions.sortAscending ? icons.up : icons.down"
              class="sort-icon" />
          </th>
        </tr>

I'm declaring the isActive in the data function and setting to false.

data() {
    return {
      width: '100%',
      'marginLeft': '20px',
      rowClicked: false,
      filteredData: this.dataDetails,
      isActive: false,

Function for button click where I'm setting isActive to true

async selectRow(detail) {
      this.isActive = true;
      this.width = '72%';
      this.rowClicked = true;

This part I'm not so sure about. Here I'm setting the Css in Sass.

 tr:not(.filters):not(.pagination-row) {
      background-color: $white;
      &.active{
        background-color: $lc_lightPeriwinkle;
      }

BSMP · Accepted Answer · 2020-10-31 02:22:27Z

10

To iterate through a table of users, for example, and highlight a tr when clicked:

<table>
    <thead>
         <tr>
             <th>ID</th>
             <th>Name</th>
             <th>Email</th>
         </tr>
    </thead>
    <tbody>
         <tr v-for="user in users" @click="selectRow(user.id)" :key="user.id" :class="{'highlight': (user.id == selectedUser)}">
                <td>{{ user.id }}</td>
                <td>{{ user.name }}</td>
                <td>{{ user.email }}</td>
          </tr>
    </tbody>
</table>

Declare your data:

data(){
   return {
       users: [],
       selectedUser: null
   }
}

Inside your selectRow method;

selectRow(user){
    this.selectedUser = user;
    //Do other things
}

And then your class:

. highlight {
     background-color: red;
}
tr:hover{
     cursor: pointer;
}

edited Oct 31, 2020 at 2:22

BSMP

4,9008 gold badges36 silver badges46 bronze badges

answered Jun 12, 2019 at 17:13

banky

8483 gold badges14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LDB Over a year ago

This works partially. All table rows are being highlighted. Is there a way to use :key for the specific row?

rico · Accepted Answer · 2021-08-31 14:45:04Z

0

im late for the party, for vue 3 composition api version, in your table:

<tr v-for="(user, i) in users" @click="selectRow(i)" :key="i" :class="[index === i ? 'highlight' : '']">
            <td>{{ user.id }}</td>
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
      </tr>

then in:

setup : () => {
    const index = ref(null)

    const selectRow = (idx) => (index.value = idx)

    return { 
       selectRow, 
       index 
    }
}

answered Aug 31, 2021 at 14:45

rico

251 silver badge5 bronze badges

1 Comment

MikeT Over a year ago

if you always have a user.id, why bother with the row index?

nhloc · Accepted Answer · 2022-03-30 13:33:16Z

0

I found the answer even though it's probably late. Credit goes to the guy who did it here not me.

<div id="app">
  <ul>
    <li @click="activate(li.id)" :class="{ active : active_el == li.id }" v-for="li in lista">{{li.texto}}</li>   
  </ul>
</div>

var app = new Vue({
  el:"#app",
  data:{
    lista:[{"id":"1","texto":"line 1"},{"id":"2","texto":"line 2"},{"id":"3","texto":"line 3"},{"id":"4","texto":"line 4"},{"id":"5","texto":"line 5"}],
    active_el:0
  },
  methods:{
    activate:function(el){
        this.active_el = el;
    }
  }
});

ul > li:hover {
  cursor:pointer;
}
.active {
  color:red;
  font-weight:bold;
}

answered Mar 30, 2022 at 13:33

nhloc

11 silver badge

Collectives™ on Stack Overflow

How do I highlight a table row on click in Vuejs?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related