v
v
vue-bootstrap4-table
1.1.10
Search…
⌃K

Pagination & Info

Pagination component is built based on Bootstrap 4 pagination template. You can enable or disable pagination and pagination info details based on your choice.
Default pagination component
Default pagination info compoent

Example

App.vue
<template>
<div id="app">
<vue-bootstrap4-table :rows="rows" :columns="columns" :config="config">
</vue-bootstrap4-table>
</div>
</template>
<script>
import VueBootstrap4Table from 'vue-bootstrap4-table'
export default {
name: 'App',
data: function() {
return {
rows: [
...
],
columns: [
...
],
config: {
pagination: true, // default true
pagination_info: true, // default true
num_of_visibile_pagination_buttons: 7, // default 5
per_page: 5, // default 10,
per_page_options: [5, 10, 20, 30],
selected_rows_info: true,
}
}
},
components: {
VueBootstrap4Table
}
}
</script>

Attributes details

Attributes
Description
type
Default
pagination
Enable/Disable pagination in the table
Boolean
true
pagination_info
Enable/Disable pagination info in the table
Boolean
true
num_of_visibile_pagination_buttons
Limit the number of visible pagination buttons in the pagination bar
Number
5
per_page
Number of rows to display per page
Number
10
per_page_options
List of options to choose how many rows being showed in single page
Array of numbers
[5,10,15]
selected_rows_info
Enable/Disable number of rows being selected info in the table
Boolean
false

Slot

Currently you can override "Previous" & "Next" button icon/text.

Previous & Next button

SlotExample.vue
...
<vue-bootstrap4-table :rows="rows" :columns="columns" :config="config">
<template slot="paginataion-previous-button">
Previous
</template>
<template slot="paginataion-next-button">
Next
</template>
</vue-bootstrap4-table>
...
After applying the above custom template to previous and next button, pagination component will look like this.
Pagination after applying slot

Pagination info

SlotExample.vue
...
<vue-bootstrap4-table :rows="rows" :columns="columns" :config="config">
<template slot="pagination-info" slot-scope="props">
This page total is {{props.currentPageRowsLength}} |
Filterd results total is {{props.filteredRowsLength}} |
Original data total is {{props.originalRowsLength}}
</template>
</vue-bootstrap4-table>
...
After applying the above custom template to pagination info , pagination info component will look like this.
Pagination info after applying slot

props

From slot-scope="props" you can access the following attributes.
Attributes
Description
props.currentPageRowsLength
Number of rows currently showing in the page
props.filteredRowsLength
Total number of items in the result after filtering
props.originalRowsLength
Original number of items in the data

Selected rows info

SlotExample.vue
...
<vue-bootstrap4-table :rows="rows" :columns="columns" :config="config">
<template slot="selected-rows-info" slot-scope="props">
Total Number of rows selected : {{props.selectedItemsCount}}
</template>
</vue-bootstrap4-table>
...

props

From slot-scope="props" you can access the following attributes.
Attributes
Description
props.selectedItemsCount
Number of rows currently being selected