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

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.

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>

<div id='app'>
    <b-table :items="items" :fields="fields" bordered>  
    </b-table>
</div>

<script>
    new Vue({
  el: '#app',
  data: dataInit,  
})

function dataInit() {  
    
    let init_data = {};
    
    init_data.fields = [
        { key: 'id', label: 'ID'},
        { key: 'age', label: 'Age'},
        { key: 'first', label: 'First Name'},
        { key: 'last', label: 'Last Name'},        
      ];
    init_data.items = [
        { id: 18, first: 'Mike', last: 'Kristensen', age: 16 },
        { id: 40, first: 'Peter', last: 'Madsen', age: 52 },
        { id: 80, first: 'Mads', last: 'Mikkelsen', age: 76 },
        { id: 28, first: 'Mikkel', last: 'Hansen', age: 34 },
      ];
    
    return init_data;
  }
</script>

I am using Vue.js v2 and BootstrapVue.

CodePudding user response：

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

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"/>
<div id="app">
  <b-table hover :items="items">
    <template v-slot:cell(age)="{ item }">
      <span :>
      {{ item.age }}
      </span>
    </template>
  </b-table>
</div>

CodePudding user response：

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:

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>

<div id='app'>
    <b-table :items="items" :fields="fields"  bordered>  
    <template #cell(age)="data"> <span v-if="data.item.age>18" >{{ data.item.age }}</span> <span v-else>{{ data.item.age }}</span> </template>
    </b-table>
</div>

<script>
    new Vue({
  el: '#app',
  data: dataInit,  
  
})

function dataInit() {  
    
    let init_data = {};
    
    init_data.fields = [
        { key: 'id', label: 'ID'},
        { key: 'age', label: 'Age'},
        { key: 'first', label: 'First Name'},
        { key: 'last', label: 'Last Name'},        
      ];
    init_data.items = [
        { id: 18, first: 'Mike', last: 'Kristensen', age: 16 },
        { id: 40, first: 'Peter', last: 'Madsen', age: 52 },
        { id: 80, first: 'Mads', last: 'Mikkelsen', age: 76 },
        { id: 28, first: 'Mikkel', last: 'Hansen', age: 34 },
      ];
    
    return init_data;
  }
</script>

CodePudding user response：

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' }
    ]
  })
});

<link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/bootstrap-vue.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>


<div id="app" >
  <b-table striped hover :items="items" :fields="fields"></b-table>
</div>