Column Reordering

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

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

1<script lang="ts">
2  import { SimpleTable } from "@simple-table/svelte";
3  import type { Theme, SvelteColumnDef, GetRowIdParams } from "@simple-table/svelte";
4  import { columnReorderingConfig } from "./column-reordering.demo-data";
5  import type { CrewMember } from "./column-reordering.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<CrewMember>[] = $state([...columnReorderingConfig.headers]);
10
11  const getRowId = ({ row }: GetRowIdParams<CrewMember>) => row.id;
12
13  function handleColumnOrderChange(newHeaders: SvelteColumnDef<CrewMember>[]) {
14    headers = newHeaders;
15  }
16</script>
17
18<SimpleTable
19  columnReordering
20  columns={headers}
21  rows={columnReorderingConfig.rows}
22  getRowId={getRowId}
23  {height}
24  {theme}
25  onColumnOrderChange={handleColumnOrderChange}
26/>

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

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