Featured

Paging Demo

Client-side pagination with configurable page sizes.

This demo shows NuGrid's pagination feature for handling large datasets efficiently.

Interactive Demo

Basic Usage

Enable pagination with a simple boolean:

<template>
  <NuGrid :data="data" :columns="columns" :paging="true" />
</template>

Paging Options

Configure pagination with an options object:

<script setup lang="ts">
import type { NuGridPagingOptions } from '#nu-grid/types'

const pagingOptions: NuGridPagingOptions = {
  enabled: true,
  pageSize: 20,
  pageSizeSelector: [10, 20, 50, 100],
  autoPageSize: false,
  suppressPanel: false,
}
</script>

<template>
  <NuGrid :data="data" :columns="columns" :paging="pagingOptions" />
</template>

Options Reference

Option	Type	Default	Description
`enabled`	`boolean`	`false`	Enable pagination
`pageSize`	`number`	`20`	Rows per page
`pageSizeSelector`	`number[] \| false`	`[10, 20, 50, 100]`	Page size dropdown options
`autoPageSize`	`boolean`	`false`	Auto-fit rows to container height
`suppressPanel`	`boolean`	`false`	Hide the built-in paging panel

Auto Page Size

Let NuGrid calculate how many rows fit in the container:

<template>
  <div class="h-[500px]">
    <NuGrid
      :data="data"
      :columns="columns"
      :paging="{ autoPageSize: true }"
    />
  </div>
</template>

Programmatic Navigation

Control pagination programmatically via the grid ref:

<script setup lang="ts">
const gridRef = useTemplateRef('grid')

function goToFirstPage() {
  gridRef.value?.pagingGoToPage(0)
}

function goToLastPage() {
  gridRef.value?.pagingGoToPage(gridRef.value?.pagingGetPageCount() - 1)
}
</script>

<template>
  <NuGrid ref="grid" :data="data" :columns="columns" :paging="true" />

  <div class="flex gap-2 mt-4">
    <UButton @click="goToFirstPage">First Page</UButton>
    <UButton @click="goToLastPage">Last Page</UButton>
  </div>
</template>

Custom Paging Panel

Hide the built-in panel and build your own:

<script setup lang="ts">
const gridRef = useTemplateRef('grid')
const currentPage = ref(0)

const pageCount = computed(() => gridRef.value?.pagingGetPageCount() ?? 1)
</script>

<template>
  <NuGrid
    ref="grid"
    :data="data"
    :columns="columns"
    :paging="{ enabled: true, suppressPanel: true }"
  />

  <UPagination
    v-model="currentPage"
    :total="pageCount"
    @update:model-value="gridRef?.pagingGoToPage($event)"
  />
</template>

Source Code

<script setup lang="ts">
import type { NuGridColumn, NuGridPagingOptions } from '#nu-grid/types'

interface Task {
  id: number
  name: string
  status: 'pending' | 'in-progress' | 'completed'
  assignee: string
  category: string
}

const categories = ['Design', 'Backend', 'Testing', 'Frontend', 'DevOps']
const assignees = ['Alice', 'Bob', 'Carol', 'David', 'Emma', 'Frank']
const statuses: Task['status'][] = ['pending', 'in-progress', 'completed']

function generateData(count: number): Task[] {
  return Array.from({ length: count }, (_, i) => ({
    id: i + 1,
    name: `Task ${i + 1}`,
    status: statuses[i % statuses.length]!,
    assignee: assignees[i % assignees.length]!,
    category: categories[i % categories.length]!,
  }))
}

const data = ref<Task[]>(generateData(100))

const pageSize = ref(10)
const autoPageSize = ref(false)

const paginationOptions = computed<NuGridPagingOptions>(() => ({
  enabled: true,
  pageSize: pageSize.value,
  pageSizeSelector: [10, 20, 50],
  autoPageSize: autoPageSize.value,
}))

const columns: NuGridColumn<Task>[] = [
  { accessorKey: 'id', header: 'ID', size: 60 },
  { accessorKey: 'name', header: 'Task', size: 150 },
  { accessorKey: 'status', header: 'Status', size: 110 },
  { accessorKey: 'assignee', header: 'Assignee', size: 100 },
  { accessorKey: 'category', header: 'Category', size: 100 },
]
</script>

<template>
  <NuGrid
    :data="data"
    :columns="columns"
    :paging="paginationOptions"
  />
</template>

Row Selection

Single and multi-row selection with checkbox column and programmatic control.

Nested Groups

Multi-level row grouping with expandable sections.