Animations

Set animateRows to enable two animations: a staggered entrance for rows on mount, and a smooth transition when rows reorder after a sort.

Row animations

Toggle animateRows on/off and use Replay to re-trigger the entrance animation. Click a column header to see the sort-reorder animation.

animateRowsAnimations on — sort to see reorder animation

Name

Department

Salary

Aria Chen

Engineering

$155,000

Marcus Webb

Product

$132,000

Priya Kapoor

Design

$118,000

Jordan Ellis

Analytics

$143,000

Sam Rivera

Engineering

$128,000

Taylor Brooks

Sales

$97,000

import { useState } from 'react';
import DataTable, { type TableColumn } from 'react-data-table-component';

interface Employee { id: number; name: string; department: string; salary: number }

const data: Employee[] = [
  { id: 1, name: 'Aria Chen',     department: 'Engineering', salary: 155000 },
  { id: 2, name: 'Marcus Webb',   department: 'Product',     salary: 132000 },
  { id: 3, name: 'Priya Kapoor',  department: 'Design',      salary: 118000 },
  { id: 4, name: 'Jordan Ellis',  department: 'Analytics',   salary: 143000 },
  { id: 5, name: 'Sam Rivera',    department: 'Engineering', salary: 128000 },
  { id: 6, name: 'Taylor Brooks', department: 'Sales',       salary:  97000 },
];

const columns: TableColumn<Employee>[] = [
  { name: 'Name',       selector: r => r.name,       sortable: true },
  { name: 'Department', selector: r => r.department, sortable: true },
  { name: 'Salary',     selector: r => r.salary,     sortable: true,
    format: r => `$${r.salary.toLocaleString()}`, right: true },
];

export default function App() {
  const [animate, setAnimate] = useState(true);
  const [key, setKey] = useState(0);

  return (
    <div>
      <label>
        <input type="checkbox" checked={animate} onChange={e => setAnimate(e.target.checked)} />
        {' '}animateRows
      </label>
      <button onClick={() => setKey(k => k + 1)}>Replay entrance animation</button>
      <DataTable
        key={key}
        columns={columns}
        data={data}
        animateRows={animate}
        highlightOnHover
      />
    </div>
  );
}

What animates

Event	Animation
Initial mount	Rows fade and slide up with a staggered delay (0–200 ms)
Sort change	Rows transition smoothly to their new positions
Expand toggle	Expander row fades in/out

Accessibility: reduced motion

All animations respect prefers-reduced-motion. When the user has requested reduced motion in their OS settings, animations are disabled automatically via a CSS media query. No JavaScript check required.

/* DataTable.css (simplified) */
@media (prefers-reduced-motion: reduce) {
  .rdt_TableRow,
  .rdt_ExpanderRow {
    animation: none !important;
    transition: none !important;
  }
}

Combining with other features

animateRows works with pagination, server-side data, selection, and expandable rows. Row animations fire whenever the data prop changes, so they also trigger after a server-side page change.

Custom animation timing

The stagger delay and duration are controlled by CSS custom properties. Override them per-theme or globally:

/* your app's CSS */
.rdt_Table {
  --rdt-row-anim-duration: 300ms;
  --rdt-row-anim-stagger:  20ms;
}