Bootstrap Vue: custom border column style and custom border row style on b-table

Question

I want to have the following behaviour:

A border in the middle of the table, that separates the table in two part
I want to "group" the row by item, meaning I want a visible separation when the item changes

For the 1, no problem

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

    // (computed property)
    get fields() {
      if (this.incoherences.length === 0) return null
      const fields = Object.keys(this.incoherences[0])
      return fields.map(field => {
        if (field === 'devis2') {
          return {
            key: field,
            tdClass: 'with-left-border',
            thClass: 'with-left-border',
          }
        } else {
          return field
        }
      })
    }

We don't see very well, but there is a vertical border between Date Fin1 and Devis2 columns. There is also a border between each row.

In the image, I want to have a border at the bottom item 14 (to kind of group them together) and then group the 15, 16 , 17,... alone. So I did this code

    lastItemIdBrowser = 0
    // (method)
    rowClass(item: Incoherence, type: any) {
      let ret = false
      if (!item || type !== 'row') return
      if (item.item1 !== this.lastItemIdBrowser && this.lastItemIdBrowser !== 0) ret = true
      this.lastItemIdBrowser = item.item1
      if (ret) return 'with-top-border'
    }

But it has no effect. To see the desired effect, I have to give the table the borderless prop, but then I lost all my other borders:

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

Does someone know how to combine those features without loosing the other one ?

Hiws Hiws · Accepted Answer · 2020-04-29T10:13:04

The issue you're facing is because the border you're seeing isn't actually applied to the tr, but the td in the table.

So you need to edit your CSS to target the td inside the rows instead.

.with-top-border > td {
  border-top: 2px solid black !important;
}

new Vue({
  el: '#app',
  data() {
    return {
      fields: [
        'age',
        'first_name',
        'last_name',
        { key: 'active', tdClass: 'border border-primary' }
      ],
      items: [
        { age: 40, first_name: 'Dickerson', last_name: 'Macdonald', active: false },
        { age: 21, first_name: 'Larsen', last_name: 'Shaw', active: false },
        { age: 89, first_name: 'Geneva', last_name: 'Wilson', active: true },
        { age: 38, first_name: 'Jami', last_name: 'Carney', active: false },
        { age: 40, first_name: 'Dickerson', last_name: 'Macdonald', active: true },
        { age: 21, first_name: 'Larsen', last_name: 'Shaw', active: true },
        { age: 89, first_name: 'Geneva', last_name: 'Wilson', active: true },
        { age: 38, first_name: 'Jami', last_name: 'Carney', active: false }
      ]
    }
  },
  methods: {
    setTbodyTrClass(item) {
      const classes = [];
      if(item.active) classes.push('custom-border');
      return classes;
    }
  }
  })

.custom-border > td {
  border-top: 3px solid green !important;
}

<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.11/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

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

Bootstrap Vue: custom border column style and custom border row style on b-table

1 Answers