Theming

Row Animation

Animated row transitions and effects.

NuGrid supports smooth row animations when data order changes due to sorting, filtering, or data updates.

Interactive Demo

Basic Usage

Enable animations with the animation prop:

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

Animation Options

Configure animation behavior:

<template>
  <NuGrid
    :data="data"
    :columns="columns"
    :animation="{
      enabled: true,
      duration: 300,
      easing: 'ease-out',
      preset: 'refresh',
    }"
  />
</template>

Options Reference

OptionTypeDefaultDescription
enabledbooleanfalseEnable row animations
durationnumber300Animation duration in milliseconds
easingstring'ease-out'CSS easing function
presetstring'refresh'Animation preset

Easing Options

  • ease-out - Fast start, slow end (default)
  • ease-in-out - Slow start and end
  • ease-in - Slow start, fast end
  • linear - Constant speed

Presets

  • refresh - Standard FLIP animation (default)
  • fade - Fade in/out effect
  • slide - Slide from side
  • scale - Scale effect

Disabling Animations

Set to false to disable:

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

How It Works

NuGrid uses Vue's TransitionGroup with FLIP animations:

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

With Virtualization

Animations work with virtualized grids:

<template>
  <NuGrid
    :data="data"
    :columns="columns"
    :animation="{ enabled: true, duration: 300 }"
    :virtualization="{ enabled: true }"
  />
</template>
When virtualization is enabled, only visible rows animate. Rows scrolling into view appear instantly for performance.

Complete Example

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

const data = ref([...initialData])

const animationOptions: NuGridAnimationOptions = {
  enabled: true,
  duration: 300,
  easing: 'ease-out',
  preset: 'refresh',
}

const columns: NuGridColumn<Task>[] = [
  { accessorKey: 'id', header: 'ID' },
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'status', header: 'Status' },
]

function shuffleData() {
  data.value = [...data.value].sort(() => Math.random() - 0.5)
}

function sortByName() {
  data.value = [...data.value].sort((a, b) => a.name.localeCompare(b.name))
}
</script>

<template>
  <div class="space-y-4">
    <div class="flex gap-2">
      <UButton @click="shuffleData">Shuffle</UButton>
      <UButton @click="sortByName">Sort by Name</UButton>
    </div>

    <NuGrid
      :data="data"
      :columns="columns"
      :animation="animationOptions"
    />
  </div>
</template>

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

Custom Theme

Build your own theme with custom styling.

Focused Row

Programmatic focus control and tracking.