javascriptcssvue.jsbootstrap-vue

Bootstrap Vue change background for each cell in b-table


I am using bootstrap vue b-table to display my items:

<b-table striped bordered :tbody-tr-class="row_class" :fields="fields" :items="items" head-variant="light" class="o-list"
    thead-class="o-gradient-header"
    @row-selected="onRowSelected" selectable
    no-local-sorting @sort-changed="change_sort" :sort-by="list_options.sort"
    :sort-desc="list_options.order==='desc'">

...

</b-table>

I want to change the background color of each cell based on a function call:

row_class(item) {
    // Insert conditionals
    // return CSS class string 
}

But this is changing the style of the entire row. I don't want that. I only want to change the style of the cell? Is there a way I can change each cell background color?


Solution

  • You can style every row using the tbody-tr-class prop

    <b-table striped hover caption-top
              :items="items"
              :fields="fields"
              :tbody-tr-class="rowClass"
        >
        </b-table>
    

    script

    new Vue({
        el: "#app",
        data() {
          return {
            fields: [
              {
                key: "name",
                label: "Name",
                sortable: true
              },
              {
                key: "email",
                label: "Email",
                sortable: true
              },
              {
                key: "age",
                label: "Old",
                sortable: true
              }
            ],
            items: [
              { age: 40, name: "admin1", email: "hoge@for.jp" },
              { age: 21, name: "admin2", email: "huga@for.jp" },
              { age: 89, name: "admin3", email: "piyo@for.jp" },
              { age: 38, name: "admin4", email: "aaaaa@for.jp" }
            ]
          };
        },
        methods: {
          rowClass(item, type) {
            if (!item || type !== 'row') return
            if (item.age > 30) return 'table-success'
          }
        }
      });