Data Organization

Nested Groups

Multi-level row grouping with expandable sections.

NuGrid supports multi-level row grouping, allowing you to organize data hierarchically with expandable/collapsible sections.

Interactive Demo

Basic Grouping

Enable grouping by specifying which columns to group by:

<script setup lang="ts">
// Group by a single column
const grouping = ref(['department'])
</script>

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

Multi-Level Grouping

Create nested groups by specifying multiple columns:

<script setup lang="ts">
// 3-tier grouping: region > country > status
const grouping = ref(['region', 'country', 'status'])
</script>

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

Group Layout Modes

Standard Group Mode

Groups share the same header row:

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

Split Group Mode

Each group section has its own header:

<template>
  <NuGrid
    v-model:grouping="grouping"
    :data="data"
    :columns="columns"
    :layout="{ mode: 'splitgroup' }"
  />
</template>

Complete Example

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

interface Product {
  id: number
  name: string
  region: string
  country: string
  status: 'active' | 'inactive'
  price: number
}

const data = ref<Product[]>([
  { id: 1, name: 'Laptop', region: 'North America', country: 'USA', status: 'active', price: 1299 },
  { id: 2, name: 'Mouse', region: 'North America', country: 'USA', status: 'active', price: 29 },
  { id: 3, name: 'Monitor', region: 'North America', country: 'Canada', status: 'active', price: 349 },
  { id: 4, name: 'Keyboard', region: 'Europe', country: 'UK', status: 'inactive', price: 89 },
  { id: 5, name: 'Webcam', region: 'Europe', country: 'Germany', status: 'active', price: 129 },
  // ... more data
])

// Group by region, then by country
const grouping = ref(['region', 'country'])

const columns: NuGridColumn<Product>[] = [
  { accessorKey: 'name', header: 'Product Name' },
  { accessorKey: 'region', header: 'Region' },
  { accessorKey: 'country', header: 'Country' },
  { accessorKey: 'status', header: 'Status' },
  {
    accessorKey: 'price',
    header: 'Price',
    cell: ({ row }) => `$${row.original.price.toFixed(2)}`,
  },
]
</script>

<template>
  <NuGrid
    v-model:grouping="grouping"
    :data="data"
    :columns="columns"
    :layout="{ mode: 'group' }"
    :focus="{ retain: true }"
  />
</template>

Group Expansion

Groups can be expanded and collapsed by clicking on the group header row. The expansion state is managed automatically, but you can control it programmatically:

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

function expandAll() {
  gridRef.value?.tableApi?.toggleAllRowsExpanded(true)
}

function collapseAll() {
  gridRef.value?.tableApi?.toggleAllRowsExpanded(false)
}
</script>

<template>
  <div class="flex gap-2 mb-4">
    <UButton @click="expandAll">Expand All</UButton>
    <UButton @click="collapseAll">Collapse All</UButton>
  </div>

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

Visual Indentation

Nested groups automatically receive visual indentation to show the hierarchy level. The indentation is styled through the theme system.

Nested groups only display when their parent group is expanded. Click on parent group headers to reveal child groups.

Paging Demo

Client-side pagination with configurable page sizes.

Group Paging

Pagination combined with grouped data.