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