Animations

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

1<template>
2  <SimpleTable
3    :column-reordering="animationsConfig.tableProps.columnReordering"
4    :columns="headers"
5    :enable-column-editor="animationsConfig.tableProps.enableColumnEditor"
6    :enable-column-editor-init-open="animationsConfig.tableProps.enableColumnEditorInitOpen"
7    :rows="animationsConfig.rows"
8    :get-row-id="getRowId"
9    :height="height"
10    :theme="theme"
11    @column-order-change="handleColumnOrderChange"
12  />
13</template>
14
15<script setup lang="ts">
16import { ref } from "vue";
17import { SimpleTable } from "@simple-table/vue";
18import type { Theme, VueColumnDef, GetRowIdParams } from "@simple-table/vue";
19import { animationsConfig } from "./animations.demo-data";
20import type { AnimationsCrewMember } from "./animations.demo-data";
21import "@simple-table/vue/styles.css";
22
23withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
24  height: "400px",
25});
26
27const headers = ref<VueColumnDef<AnimationsCrewMember>[]>([...animationsConfig.headers]);
28
29const handleColumnOrderChange = (newHeaders: VueColumnDef<AnimationsCrewMember>[]) => {
30  headers.value = newHeaders;
31};
32
33const getRowId = ({ row }: GetRowIdParams<AnimationsCrewMember>) => row.id;
34</script>

1<script lang="ts">
2  import { SimpleTable } from "@simple-table/svelte";
3  import type { Theme, SvelteColumnDef, GetRowIdParams } from "@simple-table/svelte";
4  import { animationsConfig } from "./animations.demo-data";
5  import type { AnimationsCrewMember } from "./animations.demo-data";
6  import "@simple-table/svelte/styles.css";
7
8  let { height = "400px", theme }: { height?: string | number; theme?: Theme } = $props();
9  let headers: SvelteColumnDef<AnimationsCrewMember>[] = $state([...animationsConfig.headers]);
10
11  const getRowId = ({ row }: GetRowIdParams<AnimationsCrewMember>) => row.id;
12
13  function handleColumnOrderChange(newHeaders: SvelteColumnDef<AnimationsCrewMember>[]) {
14    headers = newHeaders;
15  }
16</script>
17
18<SimpleTable
19  columnReordering
20  columns={headers}
21  enableColumnEditor
22  enableColumnEditorInitOpen
23  {getRowId}
24  rows={animationsConfig.rows}
25  {height}
26  {theme}
27  onColumnOrderChange={handleColumnOrderChange}
28/>

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

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