Conditionally change text color in BootstrapVue table

Question

I have a table created using bootstrap-vue.

Table looks like this;

The code for this table is as follows;

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

<script>
  export default {
    data() {
      return {
        // Note 'isActive' is left out and will not appear in the rendered table
        fields: [
          {
            key: 'last_name',
            sortable: true
          },
          {
            key: 'first_name',
            sortable: false
          },
          {
            key: 'age',
            label: 'Person age',
            sortable: true,
          }
        ],
        items: [
          { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { isActive: false, age: 11, first_name: 'Larsen', last_name: 'Shaw' },
          { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    }
  }
</script>

I would like to change the text colour of Person age column such that if age is >= 20, colour is green and red if otherwise.

I am using vue.js v2.6

Hiws · Accepted Answer · 2022-02-28 16:41:10Z

3

You can use the tdClass property on your field definition, which accepts a function where you can conditionally return a class that should be added to the td. This way you don't have to use a slot, and can avoid rendering unnecessary elements.

new Vue({
  el:"#app",
  data: () => ({
    fields: [
      { key: 'last_name' },
      { key: 'first_name' },
      { 
        key: 'age', 
        label: 'Person age',
        tdClass: (value) => value > 20 ? 'text-success' : 'text-danger'
      }
    ],
    items: [
      { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
      { age: 11, first_name: 'Larsen', last_name: 'Shaw' },
      { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
      { 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" class="p-3">
  <b-table striped hover :items="items" :fields="fields"></b-table>
</div>

answered Feb 28, 2022 at 16:41

Hiws

10.7k2 gold badges24 silver badges39 bronze badges

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

1 Comment

user3848207 Over a year ago

Thanks. This is the most elegant and straightforward answer.

Majed Badawi · Accepted Answer · 2022-02-28 11:34:57Z

Try this:

new Vue({
  el:"#app",
  data: () => ({
    fields: [
      { key: 'last_name', sortable: true },
      { key: 'first_name', sortable: false },
      { key: 'age', label: 'Person age', sortable: true }
    ],
    items: [
      { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
      { isActive: false, age: 11, first_name: 'Larsen', last_name: 'Shaw' },
      { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
      { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
    ]
  })
});

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.css" />
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script>


<div id="app">
  <b-table striped hover :items="items" :fields="fields">
    <template #cell(age)="{ item }">
      <p :class="item.age >= 20 ? 'text-success' : 'text-danger'">{{item.age}}</p>
    </template>
  </b-table>
</div>

Ananda Vj · Accepted Answer · 2022-02-28 11:43:42Z

2

I'm trying to help, but heads up, I haven't use bootstarp on vue, only vuetify. But I think it's similar. Okay let's go into it.

According to Bootstrap documentation, you can add template. Maybe look like this:

<template #cell(age)="data">
    <span :class="data.item.age>20? 'green-text-class':'red-text-class'">{{ data.item.age }}</span>
</template>

sry If I'm wrong. cheers~

answered Feb 28, 2022 at 11:43

Ananda Vj

1802 silver badges11 bronze badges

1 Comment

user3848207 Over a year ago

Thanks for the answer. It may not be the right answer but the hint of using templates was useful.

Collectives™ on Stack Overflow

Conditionally change text color in BootstrapVue table

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related