Featured

Full Demo

Complete demo showcasing editing, selection, filtering, column pinning, and more.

This comprehensive demo showcases many NuGrid features working together in a real-world scenario.

Interactive Demo

Features Demonstrated

This demo includes:

  • Row Selection - Multi-select with checkbox column
  • Column Filtering - Filter by email with instant results
  • Column Visibility - Toggle columns on/off
  • Column Pinning - Pin columns to left or right
  • Column Resizing - Drag column borders to resize
  • Focus Navigation - Keyboard navigation with cell/row modes
  • Action Menu - Right-click or action button for row actions
  • Editing - Double-click cells to edit values
  • Virtualization - Efficiently renders large datasets

Basic Setup

<script setup lang="ts">
import type { NuGridColumn, NuGridActionMenuItem, NuGridRow } from '#nu-grid/types'

const gridRef = useTemplateRef('grid')

const columns: NuGridColumn<User>[] = [
  { accessorKey: 'id', header: 'ID', enableEditing: false },
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'email', header: 'Email' },
  { accessorKey: 'status', header: 'Status' },
]

// Row selection state
const rowSelection = ref({})

// Column filters
const columnFilters = ref([{ id: 'email', value: '' }])

// Column pinning
const columnPinning = ref({
  left: ['__selection', 'id'],
  right: ['__actions'],
})

// Action menu items
function getRowActions(row: NuGridRow<User>): NuGridActionMenuItem[] {
  return [
    { label: 'Edit', icon: 'i-lucide-pencil' },
    { label: 'Delete', icon: 'i-lucide-trash', color: 'error' },
  ]
}
</script>

<template>
  <NuGrid
    ref="grid"
    v-model:row-selection="rowSelection"
    v-model:column-filters="columnFilters"
    v-model:column-pinning="columnPinning"
    :data="data"
    :columns="columns"
    :selection="{ mode: 'multi' }"
    :actions="{ getActions: getRowActions }"
    :editing="{ enabled: true, startClicks: 'double' }"
    :focus="{ mode: 'cell' }"
    virtualization
  />
</template>

Column Filtering

Filter data by setting the column filter value:

<script setup lang="ts">
const gridRef = useTemplateRef('grid')
const emailFilter = ref('')

// Apply filter to the email column
watch(emailFilter, (value) => {
  gridRef.value?.tableApi?.getColumn('email')?.setFilterValue(value)
})
</script>

<template>
  <UInput v-model="emailFilter" placeholder="Filter emails..." />
  <NuGrid ref="grid" :data="data" :columns="columns" />
</template>

Column Pinning

Pin columns to the left or right edges:

<script setup lang="ts">
const columnPinning = ref({
  left: ['id'],           // Pin ID column to left
  right: ['actions'],     // Pin actions to right
})
</script>

<template>
  <NuGrid
    v-model:column-pinning="columnPinning"
    :data="data"
    :columns="columns"
  />
</template>

Action Menu

Add row action menus with custom items:

<script setup lang="ts">
import type { NuGridActionMenuItem, NuGridRow } from '#nu-grid/types'

function getRowActions(row: NuGridRow<User>): NuGridActionMenuItem[] {
  return [
    { type: 'label', label: 'Actions' },
    { label: 'View Details', icon: 'i-lucide-eye' },
    { type: 'separator' },
    {
      label: 'Delete',
      icon: 'i-lucide-trash',
      color: 'error',
      onSelect: () => deleteUser(row.original.id)
    },
  ]
}
</script>

<template>
  <NuGrid
    :data="data"
    :columns="columns"
    :actions="{ getActions: getRowActions }"
  />
</template>

Demos

Interactive demos showcasing NuGrid features and capabilities.

Cell Data Types

Different cell types with automatic editors for text, number, date, and boolean.