1---
2category: Utilities
3---
4 
5# useOffsetPagination
6 
7Reactive offset pagination.
8 
9## Usage
10 
11```ts
12import { useOffsetPagination } from '@vueuse/core'
13 
14function fetchData({ currentPage, currentPageSize }: { currentPage: number, currentPageSize: number }) {
15  fetch(currentPage, currentPageSize).then((responseData) => {
16    data.value = responseData
17  })
18}
19 
20const {
21  currentPage,
22  currentPageSize,
23  pageCount,
24  isFirstPage,
25  isLastPage,
26  prev,
27  next,
28} = useOffsetPagination({
29  total: database.value.length,
30  page: 1,
31  pageSize: 10,
32  onPageChange: fetchData,
33  onPageSizeChange: fetchData,
34})
35```
36 
37## Component Usage
38 
39```vue
40<template>
41  <UseOffsetPagination
42    v-slot="{
43      currentPage,
44      currentPageSize,
45      next,
46      prev,
47      pageCount,
48      isFirstPage,
49      isLastPage,
50    }"
51    :total="database.length"
52    @page-change="fetchData"
53    @page-size-change="fetchData"
54  >
55    <div class="gap-x-4 gap-y-2 grid-cols-2 inline-grid items-center">
56      <div opacity="50">
57        total:
58      </div>
59      <div>{{ database.length }}</div>
60      <div opacity="50">
61        pageCount:
62      </div>
63      <div>{{ pageCount }}</div>
64      <div opacity="50">
65        currentPageSize:
66      </div>
67      <div>{{ currentPageSize }}</div>
68      <div opacity="50">
69        currentPage:
70      </div>
71      <div>{{ currentPage }}</div>
72      <div opacity="50">
73        isFirstPage:
74      </div>
75      <div>{{ isFirstPage }}</div>
76      <div opacity="50">
77        isLastPage:
78      </div>
79      <div>{{ isLastPage }}</div>
80    </div>
81    <div>
82      <button :disabled="isFirstPage" @click="prev">
83        prev
84      </button>
85      <button :disabled="isLastPage" @click="next">
86        next
87      </button>
88    </div>
89  </UseOffsetPagination>
90</template>
91```
92 
93Component event supported props event callback and event listener.
94 
95event listener:
96 
97```vue
98<template>
99  <UseOffsetPagination
100    v-slot="{
101      currentPage,
102      currentPageSize,
103      next,
104      prev,
105      pageCount,
106      isFirstPage,
107      isLastPage,
108    }"
109    :total="database.length"
110    @page-change="fetchData"
111    @page-size-change="fetchData"
112    @page-count-change="onPageCountChange"
113  >
114    <!-- your code -->
115  </UseOffsetPagination>
116</template>
117```
118 
119or props event callback:
120 
121```vue
122<template>
123  <UseOffsetPagination
124    v-slot="{
125      currentPage,
126      currentPageSize,
127      next,
128      prev,
129      pageCount,
130      isFirstPage,
131      isLastPage,
132    }"
133    :total="database.length"
134    :on-page-change="fetchData"
135    :on-page-size-change="fetchData"
136    :on-page-count-change="onPageCountChange"
137  >
138    <!-- your code -->
139  </UseOffsetPagination>
140</template>
141```
142 
143## Type Declarations
144 
145```ts
146export interface UseOffsetPaginationOptions {
147  /**
148   * Total number of items.
149   */
150  total?: MaybeRefOrGetter<number>
151  /**
152   * The number of items to display per page.
153   * @default 10
154   */
155  pageSize?: MaybeRefOrGetter<number>
156  /**
157   * The current page number.
158   * @default 1
159   */
160  page?: MaybeRef<number>
161  /**
162   * Callback when the `page` change.
163   */
164  onPageChange?: (
165    returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>,
166  ) => unknown
167  /**
168   * Callback when the `pageSize` change.
169   */
170  onPageSizeChange?: (
171    returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>,
172  ) => unknown
173  /**
174   * Callback when the `pageCount` change.
175   */
176  onPageCountChange?: (
177    returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>,
178  ) => unknown
179}
180export interface UseOffsetPaginationReturn {
181  currentPage: Ref<number>
182  currentPageSize: Ref<number>
183  pageCount: ComputedRef<number>
184  isFirstPage: ComputedRef<boolean>
185  isLastPage: ComputedRef<boolean>
186  prev: () => void
187  next: () => void
188}
189export type UseOffsetPaginationInfinityPageReturn = Omit<
190  UseOffsetPaginationReturn,
191  "isLastPage"
192>
193export declare function useOffsetPagination(
194  options: Omit<UseOffsetPaginationOptions, "total">,
195): UseOffsetPaginationInfinityPageReturn
196export declare function useOffsetPagination(
197  options: UseOffsetPaginationOptions,
198): UseOffsetPaginationReturn
199```
200