Change text color in BootstrapVue table if this column value is greater than another column value

Question

I have a BootstrapVue table that looks like this;

I would like to change the text colour of the number in Age column to green if Age >= ID and to red if Age < ID.

Here is the code in a single HTML file.

I am using Vue.js v2 and BootstrapVue.

user_4116300 · Answer

You can simply achieve it by using _cellVariants property.

Working Demo :

new Vue({
    el: '#app',
    data() {
      return {
        items: [{
          id: 18,
          age: 16,
          first_name: 'Dickerson',
          last_name: 'Macdonald'
        },
        {
          id: 40,
          age: 52,
          first_name: 'Larsen',
          last_name: 'Shaw'
        },
        {
          id: 80,
          age: 76,
          first_name: 'Geneva',
          last_name: 'Wilson',
        },
        {
          id: 28,
          age: 34,
          first_name: 'Thor',
          last_name: 'MacDonald'
        }]
      }
    }
  })

.text-red {
  color: red;
}

.text-green {
  color: green;
}

user_8397974 · Answer

You can utilize the same method that's shown here.

Which is to use tdClass property in your field definition, which accepts a function where you can conditionally return a class or classes. The function gets the following arguments.

value, which will be the raw value for the cell.
key, will be the key from the field.
item, the entire object for each row, which you can use to access other cells values.

new Vue({
  el:"#app",
  data: () => ({
    fields: [
      { key: 'last_name' },
      { key: 'first_name' },
      { 
        key: 'age', 
        label: 'Person age',
        tdClass: (value, key, item) => value >= item.id ? 'text-success' : 'text-danger'
      }
    ],
    items: [
      { id: 18, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
      { id: 50, age: 11, first_name: 'Larsen', last_name: 'Shaw' },
      { id: 87, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
      { id: 66, age: 38, first_name: 'Jami', last_name: 'Carney' }
    ]
  })
});

user_16418897 · Answer

you can simply apply class on the row depending upon the condition by using BootstrapVue prop ":tbody-tr-class" and then call a method on it which check whether age>18 and then return bootstrap danger class which will turn the row into red.
You can follow Row Styling and attributes section on the given link: https://bootstrap-vue.org/docs/components/table. You can simply use the code given below:

Change text color in BootstrapVue table if this column value is greater than another column value

3 Answers