Theming

Row Animations

Configure animated row transitions in NuGrid.

NuGrid supports smooth row animations when data order changes due to sorting, filtering, or data updates. Animations are disabled by default for performance.

Enabling Animations

Enable animations with the animation prop:

<template>
  <NuGrid
    :data="data"
    :columns="columns"
    :animation="{ enabled: true }"
  />
</template>

Animation Options

Option	Type	Default	Description
`enabled`	`boolean`	`false`	Enable row animations
`preset`	`string`	`'refresh'`	Animation preset to use
`duration`	`number`	`300`	Animation duration in milliseconds
`easing`	`string`	`'ease-out'`	CSS easing function
`stagger`	`number`	`15`	Delay between each row's animation
`maxStagger`	`number`	`120`	Maximum total stagger delay

Animation Presets

Choose from built-in animation presets:

refresh (default)

Subtle fade with small translate, similar to AG Grid:

<NuGrid :animation="{ enabled: true, preset: 'refresh' }" />

fade

Simple opacity transition:

<NuGrid :animation="{ enabled: true, preset: 'fade' }" />

slide

Slide up from below:

<NuGrid :animation="{ enabled: true, preset: 'slide' }" />

scale

Subtle scale with fade:

<NuGrid :animation="{ enabled: true, preset: 'scale' }" />

Custom Timing

Adjust animation timing for your use case:

<template>
  <NuGrid
    :data="data"
    :columns="columns"
    :animation="{
      enabled: true,
      duration: 400,
      easing: 'ease-in-out',
      stagger: 20,
      maxStagger: 200,
    }"
  />
</template>

Easing Functions

Easing	Description
`ease-out`	Fast start, slow end (default)
`ease-in-out`	Slow start and end
`ease-in`	Slow start, fast end
`linear`	Constant speed
Custom	Any valid CSS easing, e.g., `cubic-bezier(0.4, 0, 0.2, 1)`

Staggering

The stagger option creates a wave effect where each row starts animating slightly after the previous one:

<template>
  <NuGrid
    :data="data"
    :columns="columns"
    :animation="{
      enabled: true,
      stagger: 25,       // 25ms delay between each row
      maxStagger: 150,   // Cap total delay at 150ms
    }"
  />
</template>

The maxStagger option prevents long delays when animating many rows.

Disabling Animations

Disable animations by setting animation to false:

<template>
  <NuGrid
    :data="data"
    :columns="columns"
    :animation="false"
  />
</template>

How It Works

NuGrid uses Vue's TransitionGroup with FLIP (First, Last, Invert, Play) animations:

First - Record initial position of each row
Last - Calculate final position after data change
Invert - Apply CSS transform to move rows back to original position
Play - Animate from inverted position to final position

This technique provides smooth animations that work regardless of how the data changes.

With Sorting

Animations trigger automatically when sorting changes row order:

<script setup lang="ts">
const sorting = ref([{ id: 'name', desc: false }])

function toggleSort() {
  sorting.value = [{ id: 'name', desc: !sorting.value[0]?.desc }]
}
</script>

<template>
  <NuGrid
    v-model:sorting="sorting"
    :data="data"
    :columns="columns"
    :animation="{ enabled: true }"
  />
</template>

With Filtering

Animations apply when filtering changes the visible rows:

<script setup lang="ts">
const columnFilters = ref([])

function filterByStatus(status: string) {
  columnFilters.value = [{ id: 'status', value: status }]
}
</script>

<template>
  <NuGrid
    v-model:column-filters="columnFilters"
    :data="data"
    :columns="columns"
    :animation="{ enabled: true }"
  />
</template>

With Virtualization

Animations work with virtualized grids:

<template>
  <NuGrid
    :data="data"
    :columns="columns"
    :animation="{ enabled: true }"
    :virtualization="{ enabled: true }"
  />
</template>

When virtualization is enabled, only visible rows animate. Rows scrolling into view appear instantly for performance.

Performance Considerations

Animations are disabled by default for performance
For large datasets (1000+ rows), consider shorter durations
Virtualization reduces the number of animated elements
Use linear easing for smoother large-batch animations
Increase maxStagger cautiously to avoid perceived lag

Next Steps

Built-in Themes

Use built-in themes for styling.

Custom Themes

Create your own themes.

UI Customization

Fine-tune the NuGrid appearance with the UI prop.

Events

Handle NuGrid events for user interactions.