<scriptsetuplang="ts">import type { PaginationState }from'@tanstack/vue-table'const paginationState = ref<PaginationState>({pageIndex:0,pageSize:10,})const paginationMeta =computed(():QueryPaginationMeta=>({count:157,// Total itemspage: paginationState.value.pageIndex +1,// Convert to 1-basedpages: Math.ceil(157/ paginationState.value.pageSize),}),)consthandlePageChange=(newPagination: PaginationState)=>{ paginationState.value = newPagination}</script><template><nord-cardpadding="l"><h4slot="header">Basic Pagination</h4><divclass="n-margin-be-l"><p>Current pagination state:</p><pre>{{ JSON.stringify(paginationState, null, 2) }}</pre></div><BasePaginationv-model:page-index="paginationState.pageIndex"v-model:page-size="paginationState.pageSize":pagination-meta@page-change="handlePageChange"/></nord-card></template>
<scriptsetuplang="ts">const route =useRoute()const paginationMeta =computed(():QueryPaginationMeta=>({count:157,// Total itemspage:toNumber(route.query.page)||1,pages: Math.ceil(157/(toNumber(route.query.pageSize)||10)),}),)// Show current URL parametersconst urlParams =computed(()=>({page: route.query.page ||'1',pageSize: route.query.pageSize ||'10',}))</script><template><nord-cardpadding="l"><h4slot="header">Pagination with URL Sync</h4><divclass="n-margin-be-l"><p>Current URL parameters:</p><pre>{{ JSON.stringify(urlParams, null, 2) }}</pre><pclass="n-color-text-weaker"> Try changing the pagination and notice how the URL updates automatically.</p></div><BasePagination:pagination-metause-url-sync/></nord-card></template>
<scriptsetuplang="ts">const route =useRoute()const paginationMeta =computed(():QueryPaginationMeta=>({count:157,// Total itemspage:toNumber(route.query['list-page'])||1,pages: Math.ceil(157/(toNumber(route.query['list-pageSize'])||10)),}),)// Show current URL parametersconst urlParams =computed(()=>({'list-page': route.query['list-page']||'1','list-pageSize': route.query['list-pageSize']||'10',}))</script><template><nord-cardpadding="l"><h4slot="header">Pagination with URL Sync + Filter ID</h4><divclass="n-margin-be-l"><p>Current URL parameters with "list" prefix:</p><pre>{{ JSON.stringify(urlParams, null, 2) }}</pre><pclass="n-color-text-weaker"> Notice how the URL parameters are prefixed with "list-" to avoid conflicts with other pagination instances.</p></div><BasePagination:pagination-meta:page-size-options="[5, 10, 20, 50]"use-url-syncfilter-id="list"set-links-href/></nord-card></template>
Integration
This community asset is currently only available to use in the New Frontend for Provet Cloud.
Troubleshooting
If you experience any issues while using this community asset, please ask for support in the #vet-frontend Slack channel.
Edit page
TTherapyChoose therapy brandVVeterinaryChoose veterinary brandAbout Nord Design SystemGet support