NbPagination is the footer companion for NbDataTable, usable standalone. It is fully controlled: it emits update:page / update:pageSize and renders whatever page, pageSize and total you pass back, so the same wiring drives client-side slicing or server-side paging.
Basic Usage
vue
<template>
<NbPagination
:page="page"
:page-size="pageSize"
:total="240"
v-model:page="page"
@update:page-size="onPageSize"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const page = ref(1)
const pageSize = ref(10)
function onPageSize(size: number) {
pageSize.value = size
page.value = 1 // NbPagination already emits update:page(1) too
}
</script>Page size options & labels
Customise the selectable page sizes with pageSizeOptions, and the copy with pageSizeLabel and itemLabel.
vue
<NbPagination
:page="page"
:page-size="pageSize"
:total="88"
:page-size-options="[5, 15, 25]"
page-size-label="Rows:"
item-label="records"
v-model:page="page"
@update:page-size="pageSize = $event"
/>Density
size follows the shared sm / md / lg scale.