Editing Validation
Add Row
Add new rows with inline editing and validation.
NuGrid provides a built-in "add new row" feature that displays a special row for adding new items to the grid.
Interactive Demo
Basic Usage
Enable the add row feature with a simple boolean:
<script setup lang="ts">
function handleRowAdded(row: Product) {
// Assign an ID and add to your data source
row.id = generateId()
data.value.push(row)
}
</script>
<template>
<NuGrid
:data="data"
:columns="columns"
:add-new-row="true"
@row-add-requested="handleRowAdded"
/>
</template>
Configuration Options
Configure the add row behavior with an options object:
<template>
<NuGrid
:data="data"
:columns="columns"
:add-new-row="{
position: 'bottom',
addNewText: 'Add New Product'
}"
@row-add-requested="handleRowAdded"
/>
</template>
Options Reference
| Option | Type | Default | Description |
|---|---|---|---|
position | 'none' | 'top' | 'bottom' | 'bottom' | Where to display the add row |
addNewText | string | 'Add new row' | Placeholder text in the add row |
Column Configuration for Add Row
Control how each column behaves in the add row:
<script setup lang="ts">
const columns: NuGridColumn<Product>[] = [
{
accessorKey: 'id',
header: 'ID',
// Hide this column in add row (auto-generated)
showNew: false,
},
{
accessorKey: 'name',
header: 'Name',
// Make this field required when adding
requiredNew: true,
},
{
accessorKey: 'price',
header: 'Price',
// Custom validation for add row
validateNew: (value) => {
const num = Number(value)
if (!Number.isFinite(num) || num <= 0) {
return { valid: false, message: 'Price must be positive' }
}
return { valid: true }
},
},
{
accessorKey: 'category',
header: 'Category',
// Default value for new rows
defaultValue: 'General',
},
]
</script>
Column Options for Add Row
| Option | Type | Description |
|---|---|---|
showNew | boolean | Show/hide column in add row (default: true) |
requiredNew | boolean | Mark field as required when adding |
validateNew | (value) => ValidationResult | Custom validation function |
defaultValue | any | Default value for new rows |
Handling Row Addition
The @row-add-requested event fires when a user finalizes a new row:
<script setup lang="ts">
function handleRowAdded(row: Product) {
// Generate ID
const maxId = Math.max(...data.value.map(d => d.id), 0)
row.id = maxId + 1
// Set defaults
row.status = 'active'
row.createdAt = new Date().toISOString()
// Add to data
data.value = [...data.value, row]
// Optional: Show confirmation
toast.add({
title: 'Row Added',
description: `Added "${row.name}" to the grid`,
})
}
</script>
<template>
<NuGrid
:data="data"
:columns="columns"
:add-new-row="true"
@row-add-requested="handleRowAdded"
/>
</template>
With Validation
Combine add row with schema validation:
<script setup lang="ts">
import { z } from 'zod'
const productSchema = z.object({
name: z.string().min(2, 'Name must be at least 2 characters'),
price: z.number().min(0.01, 'Price must be greater than 0'),
stock: z.number().int().min(0, 'Stock must be non-negative'),
})
</script>
<template>
<NuGrid
:data="data"
:columns="columns"
:add-new-row="true"
:validation="{ schema: productSchema }"
:editing="{ enabled: true }"
@row-add-requested="handleRowAdded"
/>
</template>
Keyboard Navigation
- Arrow Up/Down: Navigate away from add row (finalizes the row)
- Tab: Move between cells in the add row
- Enter: Submit the current cell and move to next
- Escape: Cancel editing the current cell
The add row integrates with NuGrid's validation system. If validation fails, the user will see error messages and cannot finalize the row until all required fields pass validation.