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