PaginationCommunity Asset

<script setup lang="ts">
import type { PaginationState } from '@tanstack/vue-table'

const paginationState = ref<PaginationState>({
  pageIndex: 0,
  pageSize: 30,
})

const paginationMeta = computed(
  (): QueryPaginationMeta => ({
    count: 157, // Total items
    page: paginationState.value.pageIndex + 1, // Convert to 1-based
    pages: Math.ceil(157 / paginationState.value.pageSize),
  }),
)

const handlePageChange = (newPagination: PaginationState) => {
  paginationState.value = newPagination
}
</script>

<template>
  <nord-card padding="l">
    <h4 slot="header">Basic Pagination</h4>

    <div class="n-margin-be-l">
      <p>Current pagination state:</p>
      <pre>{{ JSON.stringify(paginationState, null, 2) }}</pre>
    </div>

    <BasePagination
      v-model:page-index="paginationState.pageIndex"
      v-model:page-size="paginationState.pageSize"
      :pagination-meta
      @page-change="handlePageChange"
    />
  </nord-card>
</template>

<script setup lang="ts">
const route = useRoute()

const paginationMeta = computed(
  (): QueryPaginationMeta => ({
    count: 157, // Total items
    page: toNumber(route.query.page) || 1,
    pages: Math.ceil(157 / (toNumber(route.query.pageSize) || 10)),
  }),
)

// Show current URL parameters
const urlParams = computed(() => ({
  page: route.query.page || '1',
  pageSize: route.query.pageSize || '10',
}))
</script>

<template>
  <nord-card padding="l">
    <h4 slot="header">Pagination with URL Sync</h4>

    <div class="n-margin-be-l">
      <p>Current URL parameters:</p>
      <pre>{{ JSON.stringify(urlParams, null, 2) }}</pre>
      <p class="n-color-text-weaker">
        Try changing the pagination and notice how the URL updates
        automatically.
      </p>
    </div>

    <BasePagination :pagination-meta use-url-sync />
  </nord-card>
</template>

<script setup lang="ts">
const route = useRoute()

const paginationMeta = computed(
  (): QueryPaginationMeta => ({
    count: 157, // Total items
    page: toNumber(route.query['list-page']) || 1,
    pages: Math.ceil(157 / (toNumber(route.query['list-pageSize']) || 10)),
  }),
)

// Show current URL parameters
const urlParams = computed(() => ({
  'list-page': route.query['list-page'] || '1',
  'list-pageSize': route.query['list-pageSize'] || '10',
}))
</script>

<template>
  <nord-card padding="l">
    <h4 slot="header">Pagination with URL Sync + Filter ID</h4>

    <div class="n-margin-be-l">
      <p>Current URL parameters with "list" prefix:</p>
      <pre>{{ JSON.stringify(urlParams, null, 2) }}</pre>
      <p class="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-sync
      filter-id="list"
      set-links-href
    />
  </nord-card>
</template>