Documentation

Animations

Cells smoothly slide between positions when the table's logical state changes — sorting, reordering columns, or toggling column visibility — instead of teleporting. Animations are enabled by default, GPU-accelerated, and virtualization-aware so cells slide in from the viewport edge when they enter and out to the edge when they leave.

StackBlitz

New in v3.1.0

Animations ship enabled by default. Click a column header to sort, drag a column to reorder, or toggle a column from the visibility popout to see cells slide smoothly into their new positions.

What gets animated

Sort change. Rows shift vertically when the user clicks a sortable header or you change the sort programmatically.
Column reorder during drag. As the user drags a column header over its neighbors, the displaced columns slide smoothly out of the way. The actively dragged column itself follows the pointer (it is intentionally not animated, so the cursor never fights the transition).
Programmatic column reorder. Updating defaultHeaders or calling tableRef.applyPinnedState animates every cell to its new column position.
Column visibility changes. Showing or hiding a column from the column editor reflows the remaining columns with the same slide.

What is not animated

Some renders are deliberately skipped to keep the table feeling responsive:

Scroll. Vertical and horizontal scrolling already produce native motion; layering animations on top would feel laggy. Scroll renders never trigger animations.
The actively dragged column.The column under the user's pointer follows the cursor instantly. Only the columns being displaced animate.
Cell content updates. Cells update text and other content instantly. The existing cellUpdateFlash flash animation is independent and can be enabled separately.

Configuration

Animations are on by default — no prop needed. Pass an animations object to tune the timing or to disable them.

Animations Prop

Property	Required	Description	Example
Property	Required	Description	Example
`animations` AnimationsConfig	Optional	Configures table animations. Animations are enabled by default with sensible motion settings (240ms duration, smooth easing) and automatically respect the user's prefers-reduced-motion setting. Pass an object to override the duration, easing, or to disable animations entirely.

AnimationsConfig Fields

Property	Required	Description	Example
Property	Required	Description	Example
`enabled` boolean	Optional	Master toggle. When false, no other field has effect and cells snap to their new positions instantly. Defaults to true.
`duration` number	Optional	Animation duration in milliseconds. Applies to every animated cell. Defaults to 240.
`easing` string	Optional	CSS easing function applied to the transform transition. Accepts any valid CSS timing function (cubic-bezier, ease, linear, etc.). Defaults to cubic-bezier(0.2, 0.8, 0.2, 1).

Examples

Disable animations

Useful for spreadsheet-style UIs where instant feedback matters more than motion.

<SimpleTable
  defaultHeaders={headers}
  rows={rows}
  animations={{ enabled: false }}
/>

Custom timing

Override the default 240 ms duration and cubic-bezier(0.2, 0.8, 0.2, 1) easing to match your product's motion language.

<SimpleTable
  defaultHeaders={headers}
  rows={rows}
  animations={{
    duration: 320,
    easing: "cubic-bezier(0.34, 1.56, 0.64, 1)", // gentle overshoot
  }}
/>

Accessibility

The animation system reads window.matchMedia("(prefers-reduced-motion: reduce)") on initialization and falls back to instant updates whenever the user has reduced motion enabled at the OS or browser level. You don't need to do anything special — this is handled automatically and overrides the enabled flag.