The most basic NuGrid requires just two props: data and columns.
<script setup lang="ts">
import type { NuGridColumn } from '#nu-grid/types'
interface User {
id: number
name: string
email: string
status: 'active' | 'inactive'
}
const data = ref<User[]>([
{ id: 1, name: 'Alice Johnson', email: 'alice@example.com', status: 'active' },
{ id: 2, name: 'Bob Smith', email: 'bob@example.com', status: 'active' },
{ id: 3, name: 'Carol White', email: 'carol@example.com', status: 'inactive' },
{ id: 4, name: 'David Brown', email: 'david@example.com', status: 'active' },
{ id: 5, name: 'Emma Davis', email: 'emma@example.com', status: 'active' },
])
const columns: NuGridColumn<User>[] = [
{ accessorKey: 'id', header: 'ID', size: 60 },
{ accessorKey: 'name', header: 'Name', size: 150 },
{ accessorKey: 'email', header: 'Email', size: 200 },
{
accessorKey: 'status',
header: 'Status',
size: 100,
cell: ({ row }) => {
const color = row.original.status === 'active' ? 'text-success' : 'text-error'
return h('span', { class: color }, row.original.status)
},
},
]
</script>
<template>
<div class="w-full">
<NuGrid
:data="data"
:columns="columns"
:ui="{
base: 'w-full border-separate border-spacing-0',
thead: '[&>tr]:bg-elevated/50',
th: 'py-2 border-y border-default first:border-l last:border-r first:rounded-l-lg last:rounded-r-lg',
td: 'border-b border-default',
}"
/>
</div>
</template>
<script setup lang="ts">
import type { NuGridColumn } from '#nu-grid/types'
interface Product {
id: number
name: string
price: number
category: string
}
const data = ref<Product[]>([
{ id: 1, name: 'Laptop', price: 999.99, category: 'Electronics' },
{ id: 2, name: 'Mouse', price: 29.99, category: 'Electronics' },
{ id: 3, name: 'Desk', price: 299.99, category: 'Furniture' },
])
const columns: NuGridColumn<Product>[] = [
{ accessorKey: 'id', header: 'ID', size: 60 },
{ accessorKey: 'name', header: 'Name', size: 200 },
{ accessorKey: 'price', header: 'Price', size: 100 },
{ accessorKey: 'category', header: 'Category', size: 150 },
]
</script>
<template>
<NuGrid :data="data" :columns="columns" />
</template>
Columns define how your data is displayed. Each column can have:
const columns: NuGridColumn<Product>[] = [
{
// Required: the key in your data object
accessorKey: 'name',
// Column header text
header: 'Product Name',
// Column sizing
size: 200,
minSize: 100,
maxSize: 400,
// Enable/disable features per column
enableSorting: true,
enableEditing: true,
enableResizing: true,
// Custom cell renderer
cell: ({ row }) => h('span', { class: 'font-bold' }, row.original.name),
},
]
NuGrid includes built-in cell types for common data formats:
const columns: NuGridColumn<Product>[] = [
{ accessorKey: 'name', header: 'Name', cellDataType: 'text' },
{ accessorKey: 'price', header: 'Price', cellDataType: 'currency' },
{ accessorKey: 'quantity', header: 'Qty', cellDataType: 'number' },
{ accessorKey: 'active', header: 'Active', cellDataType: 'boolean' },
{ accessorKey: 'createdAt', header: 'Created', cellDataType: 'date' },
]
Enable common features with simple props:
<template>
<NuGrid
:data="data"
:columns="columns"
<!-- Row selection -->
selection="multi"
<!-- Cell editing -->
:editing="{ enabled: true }"
<!-- Pagination -->
:paging="{ pageSize: 20 }"
<!-- Column resizing -->
resize-columns
<!-- Virtualization for large datasets -->
virtualization
/>
</template>
NuGrid emits events for user interactions:
<script setup lang="ts">
function onCellClicked(event) {
console.log('Cell clicked:', event.row.original, event.column.id)
}
function onCellValueChanged(event) {
console.log('Value changed:', event.oldValue, '->', event.newValue)
}
function onRowSelectionChanged(selection) {
console.log('Selected rows:', Object.keys(selection).length)
}
</script>
<template>
<NuGrid
:data="data"
:columns="columns"
@cell-clicked="onCellClicked"
@cell-value-changed="onCellValueChanged"
@row-selection-changed="onRowSelectionChanged"
/>
</template>
Access grid methods and state via a template ref:
<script setup lang="ts">
const gridRef = useTemplateRef('grid')
function getSelectedRows() {
return gridRef.value?.getSelectedRows()
}
function exportToExcel() {
gridRef.value?.exportToExcel({ filename: 'my-data' })
}
</script>
<template>
<NuGrid ref="grid" :data="data" :columns="columns" />
<UButton @click="exportToExcel">Export</UButton>
</template>
NuGrid supports v-model for various state:
<script setup lang="ts">
const rowSelection = ref({})
const sorting = ref([])
const columnFilters = ref([])
const pagination = ref({ pageIndex: 0, pageSize: 10 })
</script>
<template>
<NuGrid
v-model:row-selection="rowSelection"
v-model:sorting="sorting"
v-model:column-filters="columnFilters"
v-model:pagination="pagination"
:data="data"
:columns="columns"
/>
</template>
Customize the grid appearance using the ui prop:
<template>
<NuGrid
:data="data"
:columns="columns"
:ui="{
base: 'w-full border-separate border-spacing-0',
thead: '[&>tr]:bg-elevated/50',
th: 'py-2 border-y border-default',
td: 'border-b border-default',
}"
/>
</template>
Explore more features in the documentation: