Set Vue Bootstrap Table _rowVariant and row margin

Question

i need some ideias to custumize my Vue Boostrap table.

I have some data like:

  const tasks = [
    {
      title: 'title 1',
      wbs: '0',
      description: '...'
    },
    {
      title: 'title 2',
      wbs: '1',
      description: '...'
    },
    {
      title: 'title 3',
      wbs: '1.1',
      description: '...'
    },
    {
      title: 'title 4',
      wbs: '1.1.1',
      description: '...'
    },
    {
      title: 'title 5',
      wbs: '1.2',
      description: '...'
    }
  ]

my table:

     <b-table
        striped
        hover
        isRowHeader
        :responsive="'md'"
        :items="tasks"
        :fields="fields"
        :per-page="perPage"
        :current-page="currentPage"
      />

end my tasks are computed from Store:

computed: { ...mapGetters({ tasks: "getTasks" }) }

I need o custumize the table based on WBS value. Set _rowVariant to 'info' for 0 and 1, to 'warnig' to 1.1 and 1.2, to 'danger' to others. And also add mergin left to title based on WBS size. Plz give some ideia to accomplish this. Ty in advance.

Answer 1

Add computed new or modify existing to get row variant

computed: {
    tasksWithRowVariant() {
  return tasks?.map((task) => {
    let rowVariant
    switch (task.wbs) {
      case '0':
        rowVariant = 'info'
        break
      case '1':
        rowVariant = 'info'
        break
      case '1.1':
        rowVariant = 'warning'
        break
      case '1.2':
        rowVariant = 'warning'
        break
      default:
        rowVariant = 'danger'
    }
    task._rowVariant = rowVariant
    return task
  })
}
 }

For margin show what you have tried you would have to use slot to add margin have a look at b-table docs they got good examples there already.

Answer 2

I think using the tbody-tr-class property is a good solution for your problem. In my opinion, using the features of b-vue is better instead of adding complexity to your code with other approaches.

You can see this snippet for a simple example:

new Vue({
  el: '#app',
  data() {
    return {
      fields: [{
          key: "title",
        },
        {
          key: "wbs",
          "tbody-tr-class": (type, key, item) => {
            return 'text-danger'
          }
        },
        {
          key: "description",
        }
      ],
      items: [{
          title: 'title 1',
          wbs: '0',
          description: '...'
        },
        {
          title: 'title 2',
          wbs: '1',
          description: '...'
        },
        {
          title: 'title 3',
          wbs: '1.1',
          description: '...'
        },
        {
          title: 'title 4',
          wbs: '1.1.1',
          description: '...'
        },
        {
          title: 'title 5',
          wbs: '1.2',
          description: '...'
        }
      ]
    }
  },
  methods: {

    rowClass(item, type) {
      if (item.wbs < 1.1) {
        return "table-info"
      } else if (item.wbs < 1.2) {
        return "table-warning"
      } else {
        return "table-danger"
      }
    }
  }
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-table hover :items="items" :tbody-tr-class="rowClass"></b-table>
</div>