NuGrid provides built-in cell data types that automatically select the appropriate editor when editing cells.
| Type | Editor | Description |
|---|---|---|
text | Text input | Default string editing |
number | Number input | Numeric values with step controls |
date | Date picker | Date selection in YYYY-MM-DD format |
boolean | Checkbox | True/false toggle with click or spacebar |
Set the cellDataType property on columns to enable automatic editor selection:
<script setup lang="ts">
import type { NuGridColumn } from '#nu-grid/types'
interface Product {
id: number
name: string
price: number
releaseDate: string
inStock: boolean
}
const columns: NuGridColumn<Product>[] = [
{
accessorKey: 'name',
header: 'Product Name',
cellDataType: 'text',
},
{
accessorKey: 'price',
header: 'Price',
cellDataType: 'number',
cell: ({ row }) => `$${row.original.price.toFixed(2)}`,
},
{
accessorKey: 'releaseDate',
header: 'Release Date',
cellDataType: 'date',
},
{
accessorKey: 'inStock',
header: 'In Stock',
cellDataType: 'boolean',
},
]
</script>
<template>
<NuGrid
:data="data"
:columns="columns"
:editing="{ enabled: true, startClicks: 'double' }"
/>
</template>
You can combine cellDataType with custom cell renderers. The data type determines the editor, while the cell renderer controls display:
<script setup lang="ts">
const columns: NuGridColumn<Product>[] = [
{
accessorKey: 'price',
header: 'Price',
cellDataType: 'number',
// Custom display format
cell: ({ row }) => {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
}).format(row.original.price)
},
},
{
accessorKey: 'rating',
header: 'Rating',
cellDataType: 'number',
cell: ({ row }) => `⭐ ${row.original.rating}`,
},
]
</script>
Override the default editor for a specific column using the editor property:
<script setup lang="ts">
import MyCustomSlider from './MyCustomSlider.vue'
const columns: NuGridColumn<Product>[] = [
{
accessorKey: 'discount',
header: 'Discount %',
cellDataType: 'number',
// Custom editor overrides the default number editor
editor: {
component: MyCustomSlider,
props: { min: 0, max: 100, step: 5 }
},
},
]
</script>
Override built-in editors for all columns of a specific type using the defaultEditors prop:
<script setup lang="ts">
import CustomNumberEditor from './CustomNumberEditor.vue'
import CustomDateEditor from './CustomDateEditor.vue'
</script>
<template>
<NuGrid
:data="data"
:columns="columns"
:editing="{
enabled: true,
defaultEditors: {
number: CustomNumberEditor,
date: CustomDateEditor,
}
}"
/>
</template>
Boolean cells have special handling:
<script setup lang="ts">
const columns: NuGridColumn<Product>[] = [
{
accessorKey: 'featured',
header: 'Featured',
cellDataType: 'boolean',
// Optional: Custom renderer with Yes/No text
cell: ({ row }) =>
h('span', {
class: row.original.featured ? 'text-success' : 'text-muted'
}, row.original.featured ? 'Yes' : 'No'),
overrideCellRender: true,
},
]
</script>
overrideCellRender: true, the custom renderer is used for display, but the boolean editor is still used for editing.