NuGrid supports multi-row layouts where a single data item spans multiple visual rows. This is useful for displaying complex data with additional details, notes, or descriptions.
Enable multi-row layout with the multiRow prop:
<template>
<NuGrid
:data="data"
:columns="columns"
:multi-row="{ enabled: true, rowCount: 2 }"
/>
</template>
| Option | Type | Default | Description |
|---|---|---|---|
enabled | boolean | false | Enable multi-row layout |
rowCount | number | 1 | Number of visual rows per data item |
alignColumns | boolean | false | Align column widths across rows |
Use the row property on columns to assign them to specific visual rows:
const columns: NuGridColumn<Employee>[] = [
// Row 0 - Main information
{ accessorKey: 'id', header: 'ID', row: 0 },
{ accessorKey: 'name', header: 'Name', row: 0 },
{ accessorKey: 'email', header: 'Email', row: 0 },
// Row 1 - Additional details
{ accessorKey: 'department', header: 'Department', row: 1 },
{ accessorKey: 'salary', header: 'Salary', row: 1 },
{ accessorKey: 'hireDate', header: 'Hire Date', row: 1 },
]
Columns without a row property default to row 0.
Use the span property to make a column span multiple column slots:
const columns: NuGridColumn<Employee>[] = [
{ accessorKey: 'id', header: 'ID', row: 0 },
{ accessorKey: 'name', header: 'Name', row: 0 },
{ accessorKey: 'email', header: 'Email', row: 0 },
// Notes spans all remaining columns
{
accessorKey: 'notes',
header: 'Notes',
row: 1,
span: '*', // Span all remaining columns
wrapText: true, // Enable text wrapping for long content
},
]
| Value | Description |
|---|---|
number | Span a specific number of column slots |
'*' | Span all remaining columns in the row |
Enable alignColumns to match column widths across visual rows:
<template>
<NuGrid
:data="data"
:columns="columns"
:multi-row="{
enabled: true,
rowCount: 2,
alignColumns: true,
}"
/>
</template>
When enabled:
Enable text wrapping for columns with long content:
{
accessorKey: 'description',
header: 'Description',
row: 1,
span: '*',
wrapText: true, // Allow text to wrap to multiple lines
}
<script setup lang="ts">
import type { NuGridColumn } from '#nu-grid/types'
interface Product {
id: number
name: string
category: string
price: number
stock: number
description: string
}
const data = ref<Product[]>([
{
id: 1,
name: 'Laptop Pro 15"',
category: 'Electronics',
price: 1299.99,
stock: 25,
description: 'High-performance laptop with 16GB RAM, 512GB SSD, and dedicated graphics.',
},
// ... more products
])
const columns: NuGridColumn<Product>[] = [
// Row 0 - Product info
{ accessorKey: 'id', header: 'ID', size: 60, row: 0 },
{ accessorKey: 'name', header: 'Name', size: 180, row: 0 },
{ accessorKey: 'category', header: 'Category', size: 120, row: 0 },
{ accessorKey: 'price', header: 'Price', size: 100, row: 0, cellDataType: 'currency' },
{ accessorKey: 'stock', header: 'Stock', size: 80, row: 0, cellDataType: 'number' },
// Row 1 - Description (spans full width)
{
accessorKey: 'description',
header: 'Description',
row: 1,
span: '*',
wrapText: true,
},
]
</script>
<template>
<NuGrid
:data="data"
:columns="columns"
:multi-row="{ enabled: true, rowCount: 2, alignColumns: true }"
/>
</template>
Disable multi-row layout by setting multiRow to false:
<template>
<NuGrid
:data="data"
:columns="columns"
:multi-row="false"
/>
</template>
row assignments using computed properties.