Our BootstrapVue Tables are designed to be opt-in due to the widespread use of tables across third-party widgets like calendars and date pickers. Keep reading some BootstrapVue Tables examples to see how these tables work.
Examples
Project
Budget
Status
Users
Completion
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
$2200 USD
completed
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
<template>
<b-card no-body >
<b-card-header class= "border-0" >
<h3 class= "mb-0" > Light table</h3>
</b-card-header>
<el-table class= "table-responsive table-flush"
header-row-class-name= "thead-light"
:data= "projects" >
<el-table-column label= "Project"
min-width= "310px"
prop= "name"
sortable >
<template v-slot= "{row}" >
<b-media no-body class= "align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" :src= "row.img" >
</a>
<b-media-body>
<span class= "font-weight-600 name mb-0 text-sm" ></span>
</b-media-body>
</b-media>
</template>
</el-table-column>
<el-table-column label= "Budget"
prop= "budget"
min-width= "140px"
sortable >
</el-table-column>
<el-table-column label= "Status"
min-width= "170px"
prop= "status"
sortable >
<template v-slot= "{row}" >
<badge class= "badge-dot mr-4" type= "" >
<i :class= "`bg-${row.statusType}`" ></i>
<span class= "status" ></span>
</badge>
</template>
</el-table-column>
<el-table-column label= "Users" min-width= "190px" >
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip"
data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip"
data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip"
data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip"
data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "img/theme/team-4.jpg" >
</a>
</div>
</el-table-column>
<el-table-column label= "Completion"
prop= "completion"
min-width= "240px"
sortable >
<template v-slot= "{row}" >
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > %</span>
<div>
<base-progress :type= "row.statusType" :value= "row.completion" />
</div>
</div>
</template>
</el-table-column>
<el-table-column min-width= "180px" >
<template v-slot= "{row}" >
<el-dropdown trigger= "click" class= "dropdown" >
<span class= "btn btn-sm btn-icon-only text-light" >
<i class= "fas fa-ellipsis-v mt-2" ></i>
</span>
<el-dropdown-menu class= "dropdown-menu dropdown-menu-arrow show" slot= "dropdown" >
<b-dropdown-item> Action</b-dropdown-item>
<b-dropdown-item> Another action</b-dropdown-item>
<b-dropdown-item> Something else here</b-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<b-card-footer class= "py-4 d-flex justify-content-end" >
<base-pagination v-model= "currentPage" :per-page= "10" :total= "50" ></base-pagination>
</b-card-footer>
</b-card>
</template>
<script>
import projects from ' ./../projects '
import { Table , TableColumn , DropdownMenu , DropdownItem , Dropdown } from ' element-ui '
export default {
name : ' light-table ' ,
components : {
[ Table . name ]: Table ,
[ TableColumn . name ]: TableColumn ,
[ Dropdown . name ]: Dropdown ,
[ DropdownItem . name ]: DropdownItem ,
[ DropdownMenu . name ]: DropdownMenu ,
},
data () {
return {
projects ,
currentPage : 1
};
}
}
</script>
Dark Tables Example
Project
Budget
Status
Users
Completion
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
$2200 USD
completed
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
<template>
<b-card no-body class= "bg-default shadow" >
<b-card-header class= "bg-transparent border-0" >
<h3 class= "mb-0 text-white" > Dark table</h3>
</b-card-header>
<el-table class= "table-responsive table-dark"
header-row-class-name= "thead-dark"
:data= "projects" >
<el-table-column label= "Project"
min-width= "310px"
prop= "name"
sortable >
<template v-slot= "{row}" >
<b-media no-body class= "align-items-center" >
<a href= "#" class= "mr-3" >
<b-img class= "avatar" rounded= "circle" alt= "Image placeholder" :src= "row.img" />
</a>
<b-media-body>
<span class= "font-weight-600 name mb-0 text-sm" ></span>
</b-media-body>
</b-media>
</template>
</el-table-column>
<el-table-column label= "Budget"
prop= "budget"
min-width= "140px"
sortable >
</el-table-column>
<el-table-column label= "Status"
min-width= "170px"
prop= "status"
sortable >
<template v-slot= "{row}" >
<badge class= "badge-dot mr-4" >
<i :class= "`bg-${row.statusType}`" ></i>
<span class= "status" ></span>
</badge>
</template>
</el-table-column>
<el-table-column label= "Users" min-width= "190px" >
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip"
data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip"
data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip"
data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip"
data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "img/theme/team-4.jpg" >
</a>
</div>
</el-table-column>
<el-table-column label= "Completion"
prop= "completion"
min-width= "240px"
sortable >
<template v-slot= "{row}" >
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > %</span>
<div>
<base-progress :type= "row.statusType" :value= "row.completion" />
</div>
</div>
</template>
</el-table-column>
<el-table-column min-width= "180px" >
<template v-slot= "{row}" >
<el-dropdown trigger= "click" class= "dropdown" >
<span class= "btn btn-sm btn-icon-only text-light" >
<i class= "fas fa-ellipsis-v mt-2" ></i>
</span>
<el-dropdown-menu class= "dropdown-menu dropdown-menu-arrow show" slot= "dropdown" >
<b-dropdown-item> Action</b-dropdown-item>
<b-dropdown-item> Another action</b-dropdown-item>
<b-dropdown-item> Something else here</b-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
</b-card>
</template>
<script>
import projects from ' ./../projects '
import { Table , TableColumn , DropdownMenu , DropdownItem , Dropdown } from ' element-ui '
export default {
name : ' light-table ' ,
components : {
[ Table . name ]: Table ,
[ TableColumn . name ]: TableColumn ,
[ Dropdown . name ]: Dropdown ,
[ DropdownItem . name ]: DropdownItem ,
[ DropdownMenu . name ]: DropdownMenu ,
},
data () {
return {
projects ,
currentPage : 1
};
}
}
</script>
If you want to see more examples and properties please check the official BootstrapVue Documentation .