Bootstrap-vue b-table: How to set an css-Class for inactive rows?

Question

I am using vue2 with bootstrap-vue. Actually I have a b-table with some fields. One of the fields is 'released' with a boolean value (true/false). I want to have a css class on every row, where the value of the field 'released' is false. For example to show with another text-color that the row is inactive.

How can I achieve that? I did not find a solution in the documentation of bootstrap-vue. Has anyone an idea? (its my first question here, sorry if it might be difficult to understand)

Example (only the row of item 2 should get a css-class on the table-row, cause its not released):

...
<b-table stacked="md" :items="items" :fields="fields" >
...


<script>
...

export default {
  data () {
    return {
        fields: {
            {
              key: 'id',
              label: 'ID',
              sortable: true,
              class: 'Left',
            },
            {
              key: 'name',
              label: 'Name',
              sortable: true,
              class: 'Left'
            },
            {
              key: 'released',
              label: 'Freigegeben',
              sortable: true,
              class: 'Left'
            },
        },
        items: [
            {
              id: '1',
              name: 'nameA',
              released: true,
            },
            {
              id: '2',
              name: 'nameB',
              released: false,
            },
            {
              id: '3',
              name: 'nameC',
              released: true,
            },
            {
              id: '4',
              name: 'nameD',
              released: true,
            },

        ],

    },
  }
  ...
}

Answer 1

BootstrapVue <b-table> provides the prop tbody-tr-class for applying classes to rows, which accepts a string class name, an array of class names, or a function.

What you want to do is use the function syntac to inspect the data on each row, and return a class based on values in the rows data (the function is called for each row).

https://bootstrap-vue.js.org/docs/components/table#row-styling

The function is passed two arguments: item (the rows item data object, if it is a data row), andtype(which is a string specifying the type of row being rendered:rowfor data rows, and other values if not a data row. In your case you are interested in therow` type).

<template>
  <b-table :items="items" :fields="fields" :tbody-tr-class="rowClass">
  </b-table>
</template>

<script>
export default {
  data() {
    return {
      items: [ ... ],
      fields: [ ... ]
    }
  },
  methods: {
    // ...
    rowClass(item, type) {
      if (item && type === 'row') {
        if (item.released === true) {
          return 'text-success'
        } else {
          return 'text-secondary'
        } 
      } else {
        return null
      }
    }
  }
}
<script>

In this example I am using the Bootstrap text color utility classes, but you could use table variant utility classes instead, such as table-success and table-light to change the background color of the row.

https://bootstrap-vue.js.org/docs/reference/color-variants#table-variants

Answer 2

You should use computed to compute fields

the following code is my thought，no vertification

...
<b-table stacked="md" :items="items" :fields="fields" >
...


<script>
...

export default {
  data () {
    return {
        items: [
            {
              id: '1',
              name: 'nameA',
              released: true,
            },
            {
              id: '2',
              name: 'nameB',
              released: false,
            },
            {
              id: '3',
              name: 'nameC',
              released: true,
            },
            {
              id: '4',
              name: 'nameD',
              released: true,
            },
        ],
    },
    computed: {
        fields(){
            let emptyArr = []
                this.items.map(item => {
                let keys = Object.keys(item)
                let key = ''
                if(item.released) {
                    emptyArr.push({
                        key: keys[0],
                        label: keys[2]=== 'released' ? 'Freigegeben' : 
                        keys[0].toUpperCase(),
                        sortable: true,
                        class: 'Left'
                })} else {
                    emptyArr.push({
                        key: keys[0],
                        label: keys[2]=== 'released' ? 'Freigegeben' : 
                        keys[0].toUpperCase(),
                        sortable: true,
                        class: '' //when release is false
                })}
            })
            return emptyArr
        }
     }
  ...
}