B-table tdClass based on adjacent cell value

Question

Example code:

   export default {
      data() {
        return {
          fields: [
            { key: "some_key", tdClass: "someClass" },
            { key: "another_key"}
          ],
        },
      methods: {
        someClass(item) {
        if (item > 0) {
          return "table-success"
        }
      }

b-table's tdClass recieves an item argument which is cell's value so you can apply style based on that. But i need to return style based on adjacent cell's value.

I thought that it's possible to access parent element somehow (row in this case) and access it like row.another_key but i didn't find any info in documentation.

Is it possible to do that?

Answer 1

tdClass sends over 3 parameters when called. (value, key, item). So you can use the third parameter to access the other cell.

window.onload = () => {
  new Vue({
    el: '#app',
    created() {
      for(let i = 0; i < 10; i++){      
        this.items.push({
          id: i + 1,
          email: "[email protected]"
        })
      }
    },
    data() {
      return {
        items: [],
        fields: [
          { key: 'id' },
          { key: 'email', tdClass: "addTdClass" }
        ]
      }
    },
    methods: {
      addTdClass(value, key, item) {
        if(item.id % 2)
          return "table-primary"
      }
    }
  })
}

<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.js"></script>

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