Layout & Display
Multi-Row Layout
Display multiple visual rows per data item.
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.
Enabling Multi-Row
Enable multi-row layout with the multiRow prop:
<template>
<NuGrid
:data="data"
:columns="columns"
:multi-row="{ enabled: true, rowCount: 2 }"
/>
</template>
Multi-Row Options
| 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 |
Assigning Columns to 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.
Column Spanning
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
},
]
Span Values
| Value | Description |
|---|---|
number | Span a specific number of column slots |
'*' | Span all remaining columns in the row |
Aligned Columns
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:
- Columns in rows 1+ match the widths of corresponding row 0 columns
- Pinned columns in row 0 have spacer columns below them
- Column resizing affects the alignment
Text Wrapping
Enable text wrapping for columns with long content:
{
accessorKey: 'description',
header: 'Description',
row: 1,
span: '*',
wrapText: true, // Allow text to wrap to multiple lines
}
Complete Example
<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>
Disabling Multi-Row
Disable multi-row layout by setting multiRow to false:
<template>
<NuGrid
:data="data"
:columns="columns"
:multi-row="false"
/>
</template>
Considerations
Data Structure: Multi-row layouts are purely visual. The underlying data structure remains unchanged, making it easy to export or manipulate data normally.
Dynamic Layouts: You can dynamically toggle multi-row mode and adjust column
row assignments using computed properties.