Search code examples
vue.jsbootstrap-4bootstrap-vue

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?

Solution

  • 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>