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="{ mode: 'cell' }"
/>
</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.