# Pagination

Smart Table supports client side pagination. To enable it, you need to provide the pageSize and currentPage properties on the VTable Component.

<VTable
  :data="users"
  :pageSize="10"
  :currentPage.sync="currentPage"
>
  ...
</VTable>

1
2
3
4
5
6
7

# Page Size number

The pageSize property specify the amount of items each page should contain. If this property is present, client side pagination will be enabled.

# Current Page number

The currentPage property indicates the current active page. This property must be bound with a sync modifier for Vue 2 and with v-model:currentPage for Vue 3, since the VTable itself may update its value, e.g. if a new filter is applied, and the amount of available items decreases, and the current active page is no longer valid.

TIP

The currentPage property index starts at 1, this is to avoid confusion since visually the page links start at 1 not 0.

# Total Pages Changed number

The total amount of pages is calculated using the total amount of items and the provided page size. As these values change, the amount of pages will also change and a totalPagesChanged event will be emitted with the new amount as its payload.

# Total Items Changed number

The total amount of items changes as the Filters change. When it changes VTable will emit a totalItemsChanged Event. This event will also be emitted when the VTable mounts, so you will have the right amount from the start.

# Pagination Controls

The pagination controls are handled outside of VTable, you can use whatever you want to control it, but we provide a VTPagination component, so you can have everything you need out the box.

The component requires the following properties:

# Current Page number

This should be the same currentPage property used for the VTable component, and it should also be bound with the sync modifier for Vue or v-model:currentPage for Vue 3, that way whenever either of them changes it the other will be notified.

# Example

<template>
 <div>
   <VTable
     :data="users"
     :page-size="5"
     v-model:currentPage="currentPage"
     @totalPagesChanged="totalPages = $event"
   >
     <template #head>
       <th>Name</th>
       <th>Age</th>
       <th>State</th>
       <th>Registered</th>
     </template>
     <template #body="{rows}">
       <tr v-for="row in rows" :key="row.guid">
         <td>{{ row.name }}</td>
         <td>{{ row.age }}</td>
         <td>{{ row.address.state }}</td>
         <td>{{ row.registered }}</td>
       </tr>
     </template>
   </VTable>

   <VTPagination
     v-model:currentPage="currentPage"
     :total-pages="totalPages"
     :boundary-links="true"
   />
 </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<template>
 <div>
   <VTable
     :data="users"
     :page-size="5"
     currentPage.sync="currentPage"
     @totalPagesChanged="totalPages = $event"
   >
     <template #head>
       <th>Name</th>
       <th>Age</th>
       <th>State</th>
       <th>Registered</th>
     </template>
     <template #body="{rows}">
       <tr v-for="row in rows" :key="row.guid">
         <td>{{ row.name }}</td>
         <td>{{ row.age }}</td>
         <td>{{ row.address.state }}</td>
         <td>{{ row.registered }}</td>
       </tr>
     </template>
   </VTable>

   <VTPagination
     currentPage.sync="currentPage"
     :total-pages="totalPages"
     :boundary-links="true"
   />
 </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<script>
 import users from './users.json'

 export default {
   data: () => ({
     users: users,
     totalPages: 1,
     currentPage: 1
})
}
</script>

1
2
3
4
5
6
7
8
9
10
11

Name	Age	State	Registered
Deana Lindsay	25	Pennsylvania	2015-10-30
Wyatt Kline	39	Maine	2014-06-17
Harmon Huber	29	American Samoa	2016-01-25
Penny Maddox	29	Oregon	2016-01-08
Morgan Gomez	39	Connecticut	2014-04-10

# VTPagination Properties

Besides the currentPage and totalPages properties, there are many others used to configure the behaviour and look and feel of the pagination controls:

Property	Type	Description	Default
hideSinglePage	boolean	Hide pagination controls when there is only a single page.	`true`
maxPageLinks	number	Maximum number of page links visibles, if omitted we will show all page links.	`undefined`
boundaryLinks	boolean	Show links to navigate to the first and last page	`false`
directionLinks	boolean	Show direction links to navigate back and forth between pages	`true`

# Styling

The HTML structure for the Smart Pagination component is as follows:

<nav class="vt-pagination">
    <ul class="pagination">
       <li class="page-item active">
         <a class="page-link">1</a>
       </li>
       <li class="page-item">
         <a class="page-link">2</a>
       </li>
       <li class="page-item">
         <a class="page-link">3</a>
       </li>
       </li>
    </ul>
</nav>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

This structure is compatible with Bootstrap's Pagination. But you can easily customize it with your own Styles.

# Custom Icons

The <VTPagination> component provides sensible icons for the previous and next buttons, you can also customize the text for the last and first buttons. But you also have the ability to provide custom icons for any of those four buttons using their corresponding scoped slot:

firstPage
lastPage
next
previous

<VTPagination
      currentPage.sync="currentPage"
      :total-pages="totalPages"
>
  <template #firstPage>
    <i class="fas fa-arrow-left"/>
  </template>
  
  <template #lastPage>
    <i class="fas fa-arrow-right"/>
  </template>
  
  <template #next>
    <i class="fas fa-chevron-right"/>
  </template>
  
  <template #previous>
    <i class="fas fa-chevron-left"/>
  </template>
</VTPagination>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Each of these slots have a disabled scoped property you can use to change the icon appearance or even show a different icon when the button is disabled.