Atreya Sridhar
Atreya Sridhar

Reputation: 144

How to apply class to a specific cell in a Buefy Table?

I would like to know if there is a way in which I can dynamically apply classes targeting a specific cell in a Buefy table. As an example, the following is the code I am working on:

Template:

  <b-table :data="status.peerStatus">
    <template slot-scope="props">
      <b-table-column :class="classObject" v-for="(column, index) in columns" :key="index"
        :label="column.label" :visible="column.visible" :width="200">
        {{ props.row[column.field] }}
      </b-table-column>
    </template>
  </b-table>

Script:

  computed: {
    classObject() {
      return {
        "has-background-info": true
      };
    }

Right now, the whole row is getting highlighted in blue color due the has-background-info being set to true.

What I would like to do, however, is to target only a particular cell and apply class conditionally by passing the value of the cell like so.

Right now, what I am trying is passing the value of the cell to classObject like this

<b-table-column :class="classObject(props.row[column.field])" v-for="(column, index) in columns" :key="index"

And trying to set the class accordingly

 computed: {
    classObject(cellValue) {
      return {
        "has-background-info": cellValue === "YES" ? true : false;
      };
    }

However, the above doe not work. Is there any other way of doing this?

Upvotes: 2

Views: 3973

Answers (1)

ittus
ittus

Reputation: 22403

You should put it in method instead of computed

methods: {
    classObject(cellValue) {
      return {
        "has-background-info": cellValue === "YES" ? true : false;
      };
    }
}

Upvotes: 2

Related Questions