Data Organization

Group Paging

Pagination combined with grouped data.

NuGrid supports pagination when data is grouped, allowing you to navigate through large grouped datasets efficiently.

Basic Usage

Combine grouping with pagination:

<script setup lang="ts">
const grouping = ref(['category'])
</script>

<template>
  <NuGrid
    v-model:grouping="grouping"
    :data="data"
    :columns="columns"
    :layout="{ mode: 'group' }"
    :paging="{
      pageSize: 20,
      pageSizeSelector: [10, 20, 50, 100]
    }"
  />
</template>

How Paging Works with Groups

Pagination interacts with grouping in the following ways:

Collapsed groups: Only the group header counts toward the page
Expanded groups: All child rows count toward the page
Page boundaries: Partial groups may appear at page edges
Page count: Depends on which groups are expanded

Layout Modes

Group Mode

Standard grouped layout with collapsible headers:

<template>
  <NuGrid
    v-model:grouping="grouping"
    :data="data"
    :columns="columns"
    :layout="{ mode: 'group', stickyHeaders: true }"
    :paging="{ pageSize: 20 }"
  />
</template>

Split Group Mode

Separate tables per group with their own headers:

<template>
  <NuGrid
    v-model:grouping="grouping"
    :data="data"
    :columns="columns"
    :layout="{ mode: 'splitgroup', stickyHeaders: true }"
    :paging="{ pageSize: 20 }"
  />
</template>

Complete Example

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

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

// Generate sample data
const data = ref<Task[]>(generateTasks(100))

// Group by category
const grouping = ref(['category'])

// Pagination options
const paginationOptions: NuGridPagingOptions = {
  enabled: true,
  pageSize: 20,
  pageSizeSelector: [10, 20, 50, 100],
}

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

<template>
  <NuGrid
    v-model:grouping="grouping"
    :data="data"
    :columns="columns"
    :layout="{ mode: 'group', stickyHeaders: true }"
    :paging="paginationOptions"
  />
</template>

Multi-Level Grouping with Paging

Paging also works with nested groups:

<script setup lang="ts">
// Group by category, then by status
const grouping = ref(['category', 'status'])
</script>

<template>
  <NuGrid
    v-model:grouping="grouping"
    :data="data"
    :columns="columns"
    :layout="{ mode: 'group' }"
    :paging="{ pageSize: 25 }"
  />
</template>

When using nested groups with pagination, the page count will vary based on which groups are expanded. Expanding all groups will show more rows per page, while collapsing groups reduces the effective row count.

Nested Groups

Multi-level row grouping with expandable sections.

Add Row

Add new rows with inline editing and validation.