Vuetify v-data-table change a row color for a few seconds

user_19638 0
Viewed 6468

We've just moved over from bootstrap to Vuetify, but i'm struggling with something.

We have some updates sent (over signalR) that update a list of jobs, i'd like to be able to target a job that has been changed and change the row color for that particular job for a few seconds so the operator can see its changed.

Has anyone any pointers on how we can do this on a Vuetify v-data-table

Thanks

vuetify.js
1 Answers

I ran into the same problem. This solution is a bit crude and a bit too late, but may help someone else.

In this example I change the colour of the row permanently until the page reloads. The problem with a temporary highlight is that if the table is sorted there is no way to put the row in the visible part of the table - v-data-table will put it where it belongs in the sort, even if it's out of the view.

  1. Collect the list of IDs on initial load.
  2. Store the list inside data of the component.
  3. Use a dynamic :class attribute to highlight rows if the ID is not in the list (added or edited rows)

Solution in detail

1. Use TR in the items template to add a conditional class.

<template slot="items" slot-scope="props">
    <tr :class="newRecordClass(props.item.email, 'success')">
      <td class="text-xs-center" >{{ props.item.email }}</td>

:class="newRecordClass(props.item.email, 'success')" will call custom method newRecordClass with the email as an ID of the row.

2. Add an additional array to store IDs in your data to store

 data: {
    hydrated: false,
    originalEmails: [], <--- ID = email in my case

3. Populate the list of IDs on initial data load

  update(data) {
    data.hydrated = true; // data loaded flag
    let dataCombined = Object.assign(this.data, data); // copy response data into the instance
    if (dataCombined.originalEmails.length == 0 ) {
      // collect all emails on the first load
      dataCombined.originalEmails = dataCombined.listDeviceUsers.items.map( item => item.email)
    }
    return dataCombined;
  }

Now the instance data.originalEmails has the list of IDs loaded initially. Any new additions won't be there.

4. Add a method to check if the ID is in the list

newRecordClass(email, cssClass) {
  // Returns a class name for rows that were added after the initial load of the table
  if (email == "" || this.data.originalEmails.length==0) return "" // initial loading of the table - no data yet
  if (this.data.originalEmails.indexOf(email) < 0 ) return cssClass
}

:class="newRecordClass(..." binds class attribute on TR to newRecordClass method and is being called every time the table is updated. A better way of doing the check would be via a computed property (https://v2.vuejs.org/v2/guide/computed.html#Computed-Properties). Vue would only call it when the underlying data changed - a method is called every time regardless.

Removing the highlight

You can modify newRecordClass method to update the list of IDs with new IDs after a delay to change the colour to normal.

@bakersoft - Did you find a solution? I suspect there is an easier way to skin this cat.

user_69236610
Related