NuGrid provides a built-in "add new row" feature that displays a special row for adding new items to the grid.
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>
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>
| 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 |
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>
| 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 |
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>
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>