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.
Interactive Demo
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.