Pantanal Grid

Appearance

Pagination ​

Pantanal Grid provides flexible pagination options with customizable page sizes and navigation controls.

Simple Variant

Default pagination style with previous/next buttons and page size selector.

ID
Product Name
Price
Category
1
Product 1
$517.74
Electronics
2
Product 2
$638.52
Clothing
3
Product 3
$485.45
Accessories
4
Product 4
$127.50
Electronics
5
Product 5
$454.02
Clothing
6
Product 6
$238.86
Accessories
7
Product 7
$505.84
Electronics
8
Product 8
$814.00
Clothing
9
Product 9
$268.17
Accessories
10
Product 10
$948.82
Electronics
Showing 1-10 of 50 items
Showing 1-10 of 50 items

Pages Variant (Numeric)

Shows numeric page buttons with ellipsis for large page counts.

ID
Product Name
Price
Category
1
Product 1
$517.74
Electronics
2
Product 2
$638.52
Clothing
3
Product 3
$485.45
Accessories
4
Product 4
$127.50
Electronics
5
Product 5
$454.02
Clothing
6
Product 6
$238.86
Accessories
7
Product 7
$505.84
Electronics
8
Product 8
$814.00
Clothing
9
Product 9
$268.17
Accessories
10
Product 10
$948.82
Electronics
Showing 1-10 of 50 items
Showing 1-10 of 50 items

Edges Variant

Shows first/last page buttons along with previous/next.

ID
Product Name
Price
Category
1
Product 1
$517.74
Electronics
2
Product 2
$638.52
Clothing
3
Product 3
$485.45
Accessories
4
Product 4
$127.50
Electronics
5
Product 5
$454.02
Clothing
6
Product 6
$238.86
Accessories
7
Product 7
$505.84
Electronics
8
Product 8
$814.00
Clothing
9
Product 9
$268.17
Accessories
10
Product 10
$948.82
Electronics
Showing 1-10 of 50 items
Showing 1-10 of 50 items

With Page Input

Allow users to type page number directly.

ID
Product Name
Price
Category
1
Product 1
$517.74
Electronics
2
Product 2
$638.52
Clothing
3
Product 3
$485.45
Accessories
4
Product 4
$127.50
Electronics
5
Product 5
$454.02
Clothing
6
Product 6
$238.86
Accessories
7
Product 7
$505.84
Electronics
8
Product 8
$814.00
Clothing
9
Product 9
$268.17
Accessories
10
Product 10
$948.82
Electronics
Showing 1-10 of 50 items
of 5
Showing 1-10 of 50 items

Basic Pagination ​

Navigate through pages using the pagination controls. Try changing the page size.

ID
Product Name
Price
Category
1
Product 1
$399.62
Electronics
2
Product 2
$662.33
Clothing
3
Product 3
$126.75
Accessories
4
Product 4
$306.69
Electronics
5
Product 5
$422.26
Clothing
6
Product 6
$563.05
Accessories
7
Product 7
$615.06
Electronics
8
Product 8
$886.35
Clothing
9
Product 9
$120.28
Accessories
10
Product 10
$530.26
Electronics
Showing 1-10 of 50 items
Showing 1-10 of 50 items
Current page: 1 | Page size: 10 | Total items: 50

Enable pagination with default settings:

vue
<script setup lang="ts">
import { ref } from 'vue'
import { PantanalGrid, type ColumnDef } from '@pantanal/grid'

const rows = ref([/* ... */])
const columns: ColumnDef[] = [/* ... */]

const page = ref(1)
const pageSize = ref(10)
</script>

<template>
  <PantanalGrid
    :rows="rows"
    :columns="columns"
    key-field="id"
    v-model:page="page"
    v-model:pageSize="pageSize"
    :pageable="true"
  />
</template>

Custom Page Sizes ​

Configure available page sizes:

vue
<template>
  <PantanalGrid
    :rows="rows"
    :columns="columns"
    key-field="id"
    v-model:page="page"
    v-model:pageSize="pageSize"
    :pageable-page-sizes="[5, 10, 20, 50, 100]"
  />
</template>

Pagination Variants ​

Choose from different pagination styles:

Simple ​

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  pagination-variant="simple"
/>

Pages (Numeric) ​

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  pagination-variant="pages"
  :pageable-numeric="true"
  :pageable-button-count="5"
/>

Edges ​

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  pagination-variant="edges"
  :pageable-previous-next="true"
/>

Pagination Features ​

Always Visible ​

Keep pagination visible even when items are fewer than page size:

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  :pageable-always-visible="true"
/>

Page Input ​

Allow users to type page number:

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  :pageable-input="true"
/>

Refresh Button ​

Add a refresh button:

vue
<template>
  <PantanalGrid
    :rows="rows"
    :columns="columns"
    key-field="id"
    :pageable-refresh="true"
    @refresh="handleRefresh"
  />
</template>

<script setup lang="ts">
function handleRefresh() {
  // Reload data
  console.log('Refresh clicked')
}
</script>

Server-Side Pagination ​

For server-side pagination, use serverSide mode:

vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { PantanalGrid, type ColumnDef } from '@pantanal/grid'

const rows = ref([])
const total = ref(1000) // Total items on server
const loading = ref(false)
const page = ref(1)
const pageSize = ref(20)

watchEffect(async () => {
  loading.value = true
  try {
    const response = await fetch(`/api/data?page=${page.value}&pageSize=${pageSize.value}`)
    const data = await response.json()
    rows.value = data.items
    total.value = data.total
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <PantanalGrid
    :rows="rows"
    :columns="columns"
    key-field="id"
    :server-side="true"
    :total="total"
    :loading="loading"
    v-model:page="page"
    v-model:pageSize="pageSize"
  />
</template>

Pagination Events ​

Listen to pagination changes:

vue
<template>
  <PantanalGrid
    :rows="rows"
    :columns="columns"
    key-field="id"
    @update:page="handlePageChange"
    @update:pageSize="handlePageSizeChange"
  />
</template>

<script setup lang="ts">
function handlePageChange(newPage: number) {
  console.log('Page changed:', newPage)
}

function handlePageSizeChange(newPageSize: number) {
  console.log('Page size changed:', newPageSize)
}
</script>

Disabling Pagination ​

Disable pagination:

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  :pageable="false"
/>

Custom Page Sizes ​

Provide custom page size options:

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  :pageable-page-sizes="[5, 10, 20, 50, 100, 'all']"
/>

The 'all' option shows all rows on a single page.

Pagination Info ​

Show or hide pagination info text:

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  :pageable-info="true"  // Shows "1-10 of 100"
/>

See Also ​