Column Reordering

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

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

1<script lang="ts">
2  import { SimpleTable } from "@simple-table/svelte";
3  import type { Theme, SvelteColumnDef } from "@simple-table/svelte";
4  import { columnReorderingConfig } from "./column-reordering.demo-data";
5  import "@simple-table/svelte/styles.css";
6
7  let { height = "400px", theme }: { height?: string | number; theme?: Theme } = $props();
8  let headers: SvelteColumnDef[] = $state([...columnReorderingConfig.headers]);
9
10  function handleColumnOrderChange(newHeaders: SvelteColumnDef[]) {
11    headers = newHeaders;
12  }
13</script>
14
15<SimpleTable
16  columnReordering
17  columns={headers}
18  rows={columnReorderingConfig.rows}
19  {height}
20  {theme}
21  onColumnOrderChange={handleColumnOrderChange}
22/>

1import { createSignal } from "solid-js";
2import { SimpleTable } from "@simple-table/solid";
3import type { Theme } from "@simple-table/solid";
4import { columnReorderingConfig } 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  return (
11    <SimpleTable
12      columnReordering
13      columns={headers()}
14      rows={columnReorderingConfig.rows}
15      height={props.height ?? "400px"}
16      theme={props.theme}
17      onColumnOrderChange={setHeaders}
18    />
19  );
20}

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