Skip to content

Pagination

A pagination is a structured set of data made up of rows and columns (tabular data). A pagination allows you to quickly and easily look up values that indicate some kind of connection between different types of data

Examples

Code
vue
<script setup lang="ts">
import { BasePagination } from '@point-hub/papp'
import { ref } from 'vue'

const pagination = ref({
  page: 1,
  page_size: 5,
  total_document: 100
})

const updateData = () => {}
</script>

<template>
  <Demo>
    <component
      :is="BasePagination"
      v-model="pagination.page"
      :page-size="pagination.page_size"
      :totalDocument="pagination.total_document"
      @update:model-value="updateData()"
    />
  </Demo>
</template>

Pagination API

Props

NameTypeDefaultDescription
v-modelnumberPage number is required.
page-sizenumberPage size is required.
total-documentnumberTotal document is required.
max-buttonnumber5Number of max buttons show.

Event

@update:model-value event for choosen page

Released under the MIT License.