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
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?
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>
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.
