CODEWITHSUNDEEP
vue.jsbootstrap-4bootstrap-vue
developee web
developee web

Reputation: 13

How to use rowspan in Bootstrap-Vue b-table?

Codesandbox: https://codesandbox.io/s/bootstrap-vue-forked-cei72?file=/src/App.vue

I am using Bootstrap-Vue in my project.

I have a question that I need a table layout like the image below.

b-table-simple layout

b-table-simple layout

I can make it in b-table-simple but because the table needs the sorting feature, so I want to make the same

table layout in b-table.

I have been stocked here for a very long time. How can I make it?

Upvotes: 1

Views: 3207

Answers (2)

barryp
barryp

Reputation: 21

Another method is to use the tbody-tr-class to pass a function (e.g. :tbody-tr-class="rowClass", you can then make a decision based on the data to apply a class. I use this to remove borders, add bold to totals and increase the border between rows.

<style lang="scss">
    .tbl-big-border {
        border-top-color: black;
        border-top-style: solid;
    }
    .tbl-noborder {
        &>td:nth-child(1) {
            border-top: none;
        }
    }
    .tbl-totnoborder {
        font-weight: bold;
        &>td:nth-child(1) {
            border-top: none;
        }
    }
</style>

Then in the row class function you can do this sort of thing:

rowClass (item, type) {
    if (!item || type !== 'row') return
    if (item.id) return 'tbl-border'
    return (item.isTot) ? 'totnoborder' : 'tbl-noborder'
}

This method allows for application of classes based on the data.

Upvotes: 0

Iman Shafiei
Iman Shafiei

Reputation: 1617

I think you can use a slot for this purpose and change the CSS of the bootstrap table.

new Vue({
  el: "#app",
  data: function() {
    return {
      fields: [{
          label: "name",
          key: "name",
        },
        {
          label: "stuff",
          key: "stuff",
        },
      ],
      items: [{
          id: 1234,
          name: "Ken",
          stuff: "A1",
          stuff2: "A2",
        },
        {
          id: 1235,
          name: "John",
          stuff: "B1",
          stuff2: "B2",
        },
        {
          id: 1236,
          name: "Merry",
          stuff: "C1",
          stuff2: "C2",
        },
      ],
    }
  },
});
.customTable>tbody>tr>td:nth-child(2) {
  padding: 0;
}

.customTable>tbody>tr>td:nth-child(2)>div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 0;
}

.customTable>tbody>tr>td:nth-child(2)>div:nth-child(1) {
  border-bottom: 1px solid #dee2e6;
}
<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 class="customTable" :fields="fields" :items="items" bordered>
    <template #cell(name)="{ item }">
              <div>{{ item.name }}</div>
              <div>{{ item.id }}</div>
            </template>
    <template #cell(stuff)="{ item }">
                <div>{{ item.stuff }}</div>
              <div>{{ item.stuff2 }}</div>
            </template>
  </b-table>
</div>

Upvotes: 1

Related Questions