OneWayTech / vue2-datatable

(DEPRECATED) The best Datatable for Vue.js 2.x which never sucks. Give us a star 🌟 if you like it!
MIT License
881 stars 230 forks source link

Row custom style #186

Open SubhaChandraDas opened 4 years ago

SubhaChandraDas commented 4 years ago

Hi, Can you share me some idea about custom styling of a particular row after loading all data on data-table. I want to apply row style on a particular row which met some specific condition. It will be a great help! Thanks in advance.

dgaus commented 4 years ago

I resorted to doing something like this, though it's not reactive, it does work.

  computed: {
    isCompleted() {
      return this.row["completed"]
    }
  },

  methods: {
    updateRowColor(value) {
      if (value) {
        this.$el.closest('tr').classList.add('success')
      } else {
        this.$el.closest('tr').classList.remove('success')
      }
    }
  },

  mounted() {
    this.updateRowColor(this.row[this.field])
  },

  watch: {
    isCompleted(value) {
      this.updateRowColor(value)
    }
  },