BootstrapVue Tables
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 | |
|---|---|---|---|---|---|
Argon Design System
|
$2500 USD | pending |
|
60%
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
React Material Dashboard
|
$4400 USD | on schedule |
|
90%
|
|
Vue Paper UI Kit PRO
|
$2200 USD | completed |
|
100%
|
|
|
Argon Design System
|
$2500 USD | pending |
|
60%
|
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
|
React Material Dashboard
|
$4400 USD | on schedule |
|
90%
|
<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 | |
|---|---|---|---|---|---|
|
Argon Design System
|
$2500 USD | pending |
|
60%
|
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
|
React Material Dashboard
|
$4400 USD | on schedule |
|
90%
|
|
|
Vue Paper UI Kit PRO
|
$2200 USD | completed |
|
100%
|
|
|
Argon Design System
|
$2500 USD | pending |
|
60%
|
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
|
React Material Dashboard
|
$4400 USD | on schedule |
|
90%
|
<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.