# 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](https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/develop/src/assets/img/default_pagination.png)

![Default pagination info compoent](https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/develop/src/assets/img/default_pagination_info.png)

## Example

{% code title="App.vue" %}

```javascript
<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>
```

{% endcode %}

## 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

{% code title="SlotExample.vue" %}

```javascript
...
<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>
...
```

{% endcode %}

After applying the above custom template to **`previous`** and **`next`** button, pagination component will look like this.

![Pagination after applying slot](https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/develop/src/assets/img/default_pagination_slot.png)

### Pagination info

{% code title="SlotExample.vue" %}

```javascript
...
<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>
...
```

{% endcode %}

After applying the above custom template to pagination info , pagination info component will look like this.

![Pagination info after applying slot](https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/develop/src/assets/img/default_pagination_info_slot.png)

#### 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

{% code title="SlotExample.vue" %}

```javascript
...
<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>
...
```

{% endcode %}

#### props

From  **`slot-scope="props"`** you can access the following attributes.

| Attributes               | Description                             |
| ------------------------ | --------------------------------------- |
| props.selectedItemsCount | Number of rows currently being selected |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://rubanraj54.gitbook.io/vue-bootstrap4-table/1.1.2/pagination-and-info.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.