Presets

NuGrid provides built-in presets that configure sensible defaults for common use cases. Presets hydrate focus, editing, layout, validation, and virtualization options in a single prop.

Using Presets

Apply a preset with the preset prop:

<template>
  <NuGrid preset="editable" :data="data" :columns="columns" />
</template>

Available Presets

readOnly

Read-only grid with row navigation, no editing:

<template>
  <NuGrid preset="readOnly" :data="data" :columns="columns" />
</template>

Configuration:

• Focus mode: row
• Editing: disabled

Best for: Dashboards, reports, data displays where users only view data.

editable

Full-featured editable grid with cell navigation and sticky headers:

<template>
  <NuGrid preset="editable" :data="data" :columns="columns" />
</template>

Configuration:

• Focus mode: cell
• Editing: enabled
• Layout: sticky headers, auto-size to content

Best for: Data entry applications, spreadsheet-like interfaces.

kanban

Kanban-style grouped grid with row navigation:

<template>
  <NuGrid preset="kanban" :data="data" :columns="columns" />
</template>

Configuration:

• Focus mode: row
• Editing: enabled with minimal keyboard triggers (Enter, F2 only)
• Layout: group mode with sticky headers

Best for: Task boards, grouped data views with occasional editing.

forms

Form-like grid optimized for data entry:

<template>
  <NuGrid preset="forms" :data="data" :columns="columns" />
</template>

Configuration:

• Focus mode: cell with first/last navigation, page step of 5
• Editing: single-click to edit
• Validation: validate on blur
• Layout: native scrollbars, fill container

Best for: Data entry forms, record editing interfaces.

analytics

Analytics grid optimized for large read-only datasets:

<template>
  <NuGrid preset="analytics" :data="data" :columns="columns" />
</template>

Configuration:

• Focus mode: row
• Editing: disabled
• Virtualization: enabled with optimized settings
• Layout: sticky headers

Best for: Large datasets, reporting dashboards, analytics views.

Overriding Preset Options

Presets provide a starting point. Override any option by passing the specific prop:

<template>
  <NuGrid
    preset="editable"
    :editing="{ startClicks: 'single' }"
    :data="data"
    :columns="columns"
  />
</template>

Override values take priority over preset defaults.

Preset vs Manual Configuration

Using a preset is equivalent to manually setting the same options:

<!-- Using preset -->
<NuGrid preset="editable" :data="data" :columns="columns" />

<!-- Equivalent manual configuration -->
<NuGrid
  :focus="{ mode: 'cell' }"
  :editing="{ enabled: true }"
  :layout="{ stickyHeaders: true, autoSize: 'content' }"
  :data="data"
  :columns="columns"
/>

Preset Reference

Next Steps