Documentation

Animations

Cells slide into place on sort, column reorder, and visibility changes. On by default — no prop required.

Disable animations

Animations are on by default. Set enabled: false when you want cells to snap instantly.

React TSX

Copy

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

Custom timing

Override the default 240 ms duration and easing to match your product motion.

React TSX

Copy

<SimpleTable
  columns={columns}
  rows={rows}
  animations={{ duration: 320, easing: "ease-out" }}
/>

What animates

Sort, drag reorder (neighbors only), programmatic column order, and column visibility. Scroll and cell content updates do not animate. For value-change flashes, see Live Updates (cellUpdateFlash).

prefers-reduced-motion disables motion automatically.

Example

Sort or drag a column to see cells slide. Use Code or StackBlitz for the full example.

React TSX

Copy

1import { useState } from "react";
2import { SimpleTable } from "@simple-table/react";
3import type { Theme, ReactColumnDef } from "@simple-table/react";
4import { animationsConfig } from "./animations.demo-data";
5import "@simple-table/react/styles.css";
6
7const AnimationsDemo = ({
8  height = "400px",
9  theme,
10}: {
11  height?: string | number;
12  theme?: Theme;
13}) => {
14  const [headers, setHeaders] = useState(() => [...animationsConfig.headers]);
15
16  const handleColumnOrderChange = (newHeaders: ReactColumnDef[]) => {
17    setHeaders(newHeaders);
18  };
19
20  return (
21    <SimpleTable
22      columnReordering={animationsConfig.tableProps.columnReordering}
23      columns={headers}
24      enableColumnEditor={animationsConfig.tableProps.enableColumnEditor}
25      enableColumnEditorInitOpen={animationsConfig.tableProps.enableColumnEditorInitOpen}
26      rows={animationsConfig.rows}
27      height={height}
28      theme={theme}
29      onColumnOrderChange={handleColumnOrderChange}
30    />
31  );
32};
33
34export default AnimationsDemo;

Angularanimations-demo.component.ts

Copy

1import { Component, Input } from "@angular/core";
2import { SimpleTableComponent } from "@simple-table/angular";
3import type { AngularColumnDef, Row, Theme } from "@simple-table/angular";
4import { animationsConfig } from "./animations.demo-data";
5import "@simple-table/angular/styles.css";
6
7@Component({
8  selector: "animations-demo",
9  standalone: true,
10  imports: [SimpleTableComponent],
11  template: `
12    <simple-table
13      [rows]="rows"
14      [columns]="headers"
15      [height]="height"
16      [theme]="theme"
17      [columnReordering]="true"
18      [enableColumnEditor]="true"
19      [enableColumnEditorInitOpen]="true"
20      (columnOrderChange)="onColumnOrderChange($event)"
21    ></simple-table>
22  `,
23})
24export class AnimationsDemoComponent {
25  @Input() height: string | number = "400px";
26  @Input() theme?: Theme;
27
28  readonly rows: Row[] = animationsConfig.rows;
29  headers: AngularColumnDef[] = [...animationsConfig.headers];
30
31  onColumnOrderChange(newHeaders: AngularColumnDef[]): void {
32    this.headers = newHeaders;
33  }
34}
35
36
37// animations.demo-data.ts
38// Self-contained demo table setup for this example.
39import type { AngularColumnDef } from "@simple-table/angular";
40
41
42export const animationsHeaders: AngularColumnDef[] = [
43  { accessor: "id", label: "ID", width: 60, sortable: true, type: "number" },
44  { accessor: "name", label: "Name", minWidth: 140, width: "1fr", sortable: true, type: "string" },
45  { accessor: "age", label: "Age", width: 80, align: "right", sortable: true, type: "number" },
46  { accessor: "role", label: "Role", minWidth: 140, width: "1fr", sortable: true, type: "string" },
47  {
48    accessor: "department",
49    disableReorder: true,
50    sortable: true,
51    label: "Department",
52    minWidth: 140,
53    width: "1fr",
54    type: "string",
55  },
56];
57
58export const animationsData = [
59  { id: 1, name: "Captain Stella Vega", age: 38, role: "Mission Commander", department: "Flight Operations" },
60  { id: 2, name: "Dr. Cosmos Rivera", age: 34, role: "Astrophysicist", department: "Science" },
61  { id: 3, name: "Commander Nebula Johnson", age: 42, role: "Operations Director", department: "Mission Control" },
62  { id: 4, name: "Cadet Orbit Williams", age: 26, role: "Flight Engineer", department: "Engineering" },
63  { id: 5, name: "Dr. Galaxy Chen", age: 31, role: "Life Support Specialist", department: "Engineering" },
64  { id: 6, name: "Lt. Meteor Lee", age: 29, role: "Navigation Officer", department: "Flight Operations" },
65  { id: 7, name: "Dr. Comet Hassan", age: 33, role: "Mission Planner", department: "Planning" },
66  { id: 8, name: "Major Pulsar White", age: 36, role: "Communications Director", department: "Communications" },
67  { id: 9, name: "Specialist Quasar Black", age: 28, role: "Systems Analyst", department: "Technology" },
68  { id: 10, name: "Engineer Supernova Blue", age: 35, role: "Propulsion Engineer", department: "Engineering" },
69  { id: 11, name: "Dr. Aurora Kumar", age: 30, role: "Planetary Geologist", department: "Science" },
70  { id: 12, name: "Admiral Cosmos Silver", age: 45, role: "Program Director", department: "Leadership" },
71];
72
73export const animationsConfig = {
74  headers: animationsHeaders,
75  rows: animationsData,
76  tableProps: { columnReordering: true, enableColumnEditor: true, enableColumnEditorInitOpen: true },
77} as const;
78

TypeScriptAnimationsDemo.ts

Copy

1import { SimpleTableVanilla } from "simple-table-core";
2import type { Theme } from "simple-table-core";
3import { animationsConfig } from "./animations.demo-data";
4import "simple-table-core/styles.css";
5
6export function renderAnimationsDemo(
7  container: HTMLElement,
8  options?: { height?: string | number; theme?: Theme }
9): SimpleTableVanilla {
10  const table = new SimpleTableVanilla(container, {
11    columns: animationsConfig.headers,
12    rows: animationsConfig.rows,
13    height: options?.height ?? "400px",
14    theme: options?.theme,
15    columnReordering: true,
16    enableColumnEditor: true,
17    enableColumnEditorInitOpen: true,
18  });
19  return table;
20}
21
22
23// animations.demo-data.ts
24// Self-contained demo table setup for this example.
25import type { ColumnDef } from "simple-table-core";
26
27
28export const animationsHeaders: ColumnDef[] = [
29  { accessor: "id", label: "ID", width: 60, sortable: true, type: "number" },
30  { accessor: "name", label: "Name", minWidth: 140, width: "1fr", sortable: true, type: "string" },
31  { accessor: "age", label: "Age", width: 80, align: "right", sortable: true, type: "number" },
32  { accessor: "role", label: "Role", minWidth: 140, width: "1fr", sortable: true, type: "string" },
33  {
34    accessor: "department",
35    disableReorder: true,
36    sortable: true,
37    label: "Department",
38    minWidth: 140,
39    width: "1fr",
40    type: "string",
41  },
42];
43
44export const animationsData = [
45  { id: 1, name: "Captain Stella Vega", age: 38, role: "Mission Commander", department: "Flight Operations" },
46  { id: 2, name: "Dr. Cosmos Rivera", age: 34, role: "Astrophysicist", department: "Science" },
47  { id: 3, name: "Commander Nebula Johnson", age: 42, role: "Operations Director", department: "Mission Control" },
48  { id: 4, name: "Cadet Orbit Williams", age: 26, role: "Flight Engineer", department: "Engineering" },
49  { id: 5, name: "Dr. Galaxy Chen", age: 31, role: "Life Support Specialist", department: "Engineering" },
50  { id: 6, name: "Lt. Meteor Lee", age: 29, role: "Navigation Officer", department: "Flight Operations" },
51  { id: 7, name: "Dr. Comet Hassan", age: 33, role: "Mission Planner", department: "Planning" },
52  { id: 8, name: "Major Pulsar White", age: 36, role: "Communications Director", department: "Communications" },
53  { id: 9, name: "Specialist Quasar Black", age: 28, role: "Systems Analyst", department: "Technology" },
54  { id: 10, name: "Engineer Supernova Blue", age: 35, role: "Propulsion Engineer", department: "Engineering" },
55  { id: 11, name: "Dr. Aurora Kumar", age: 30, role: "Planetary Geologist", department: "Science" },
56  { id: 12, name: "Admiral Cosmos Silver", age: 45, role: "Program Director", department: "Leadership" },
57];
58
59export const animationsConfig = {
60  headers: animationsHeaders,
61  rows: animationsData,
62  tableProps: { columnReordering: true, enableColumnEditor: true, enableColumnEditorInitOpen: true },
63} as const;
64

StackBlitz

Props

Animations Configuration

Property	Required	Description	Example
Property	Required	Description	Example
`animations` AnimationsConfig	Optional	FLIP-style cell motion on sort, column reorder, and visibility changes. Enabled by default; respects prefers-reduced-motion.

AnimationsConfig

Property	Required	Description	Example
Property	Required	Description	Example
`enabled` boolean	Optional	Master toggle for animations. 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 240ms.
`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).