Header Renderer

1import { signal } from "@angular/core";
2import type { HeaderEmployee } from "./header-renderer.demo-data";
3
4export type HeaderDemoSortDir = "asc" | "desc" | null;
5
6type HeaderKey = keyof HeaderEmployee;
7
8function isHeaderKey(accessor: string): accessor is HeaderKey {
9  return (
10    accessor === "id" ||
11    accessor === "name" ||
12    accessor === "email" ||
13    accessor === "role" ||
14    accessor === "salary" ||
15    accessor === "department"
16  );
17}
18
19const CYCLE: HeaderDemoSortDir[] = ["asc", "desc", null];
20
21export const headerDemoSortAccessor = signal<HeaderKey | null>(null);
22export const headerDemoSortDirection = signal<HeaderDemoSortDir>(null);
23
24export function cycleHeaderDemoSort(accessor: string): void {
25  if (!isHeaderKey(accessor)) return;
26  const currentAcc = headerDemoSortAccessor();
27  const dir = headerDemoSortDirection();
28  if (currentAcc !== accessor) {
29    headerDemoSortAccessor.set(accessor);
30    headerDemoSortDirection.set("asc");
31    return;
32  }
33  const idx = CYCLE.indexOf(dir);
34  const next = CYCLE[(idx + 1) % CYCLE.length]!;
35  if (next) {
36    headerDemoSortAccessor.set(accessor);
37    headerDemoSortDirection.set(next);
38  } else {
39    headerDemoSortAccessor.set(null);
40    headerDemoSortDirection.set(null);
41  }
42}
43
44
45// header-renderer-demo.component.ts
46import { Component, computed, Input } from "@angular/core";
47import { SimpleTableComponent } from "@simple-table/angular";
48import type { AngularColumnDef, GetRowIdParams, Theme } from "@simple-table/angular";
49import { headerDemoSortAccessor, headerDemoSortDirection } from "./header-demo-sort";
50import { headerRendererConfig } from "./header-renderer.demo-data";
51import type { HeaderEmployee } from "./header-renderer.demo-data";
52import { HeaderSortableHeaderComponent } from "./header-sortable-header.component";
53import "@simple-table/angular/styles.css";
54
55@Component({
56  selector: "header-renderer-demo",
57  standalone: true,
58  imports: [SimpleTableComponent],
59  template: `
60    <simple-table
61      [getRowId]="getRowId"
62      [rows]="sortedData()"
63      [columns]="headers()"
64      [height]="height"
65      [theme]="theme"
66    ></simple-table>
67  `,
68})
69export class HeaderRendererDemoComponent {
70  @Input() height: string | number = "400px";
71  @Input() theme?: Theme;
72
73  readonly sortedData = computed(() => {
74    const acc = headerDemoSortAccessor();
75    const dir = headerDemoSortDirection();
76    if (!acc || !dir) return [...headerRendererConfig.rows];
77    return [...headerRendererConfig.rows].sort((a, b) => {
78      const aVal = a[acc];
79      const bVal = b[acc];
80      if (aVal === bVal) return 0;
81      const cmp =
82        typeof aVal === "number" && typeof bVal === "number"
83          ? aVal - bVal
84          : String(aVal).localeCompare(String(bVal));
85      return dir === "asc" ? cmp : -cmp;
86    });
87  });
88
89  readonly headers = computed((): AngularColumnDef<HeaderEmployee>[] =>
90    headerRendererConfig.headers.map((h) => ({
91      ...h,
92      sortable: false,
93      headerRenderer: HeaderSortableHeaderComponent,
94    })),
95  );
96
97  getRowId = ({ row }: GetRowIdParams<HeaderEmployee>) => row.id;
98}
99
100
101// header-renderer.demo-data.ts
102// Self-contained demo table setup for this example.
103import type { AngularColumnDef } from "@simple-table/angular";
104
105export interface HeaderEmployee {
106  id: number;
107  name: string;
108  email: string;
109  role: string;
110  salary: number;
111  department: string;
112}
113
114export const headerRendererData: HeaderEmployee[] = [
115  { id: 1, name: "Alice Johnson", email: "alice@example.com", role: "Engineer", salary: 125000, department: "Engineering" },
116  { id: 2, name: "Bob Martinez", email: "bob@example.com", role: "Designer", salary: 98000, department: "Design" },
117  { id: 3, name: "Clara Chen", email: "clara@example.com", role: "PM", salary: 115000, department: "Product" },
118  { id: 4, name: "David Kim", email: "david@example.com", role: "Engineer", salary: 132000, department: "Engineering" },
119  { id: 5, name: "Elena Rossi", email: "elena@example.com", role: "Analyst", salary: 89000, department: "Analytics" },
120  { id: 6, name: "Frank Müller", email: "frank@example.com", role: "Engineer", salary: 118000, department: "Engineering" },
121  { id: 7, name: "Grace Park", email: "grace@example.com", role: "Designer", salary: 105000, department: "Design" },
122  { id: 8, name: "Henry Patel", email: "henry@example.com", role: "Lead", salary: 145000, department: "Engineering" },
123];
124
125export const headerRendererHeaders: AngularColumnDef<HeaderEmployee>[] = [
126  { accessor: "id", label: "ID", width: 60, type: "number", sortable: true },
127  { accessor: "name", label: "Employee Name", width: 180, type: "string", sortable: true },
128  { accessor: "email", label: "Email Address", width: 200, type: "string" },
129  { accessor: "role", label: "Job Role", width: 130, type: "string", sortable: true },
130  { accessor: "salary", label: "Annual Salary", width: 140, type: "number", sortable: true },
131  { accessor: "department", label: "Department", width: 150, type: "string", sortable: true },
132];
133
134export const headerRendererConfig = {
135  headers: headerRendererHeaders,
136  rows: headerRendererData,
137  tableProps: {
138    selectableCells: true,
139    columnResizing: true,
140  },
141};
142
143
144// header-sortable-header.component.ts
145import { Component, computed, Input, signal } from "@angular/core";
146import type { HeaderRendererProps } from "@simple-table/angular";
147import { cycleHeaderDemoSort, headerDemoSortAccessor, headerDemoSortDirection } from "./header-demo-sort";
148
149@Component({
150  standalone: true,
151  selector: "demo-header-sortable",
152  template: `
153    <div
154      style="cursor:pointer;user-select:none;font-weight:600;display:flex;align-items:center;gap:4px;"
155      (click)="onClick()"
156      (keydown)="onKeydown($event)"
157      role="button"
158      tabindex="0"
159    >
160      <span>{{ header.label }}</span>
161      @if (indicator()) {
162        <span style="font-size:10px;color:#6366f1;">{{ indicator() }}</span>
163      }
164    </div>
165  `,
166})
167export class HeaderSortableHeaderComponent {
168  private readonly accessorStr = signal("");
169
170  @Input({ required: true }) set header(h: HeaderRendererProps["header"]) {
171    this._header = h;
172    this.accessorStr.set(String(h.accessor));
173  }
174  get header(): HeaderRendererProps["header"] {
175    return this._header;
176  }
177  private _header!: HeaderRendererProps["header"];
178
179  @Input() accessor?: HeaderRendererProps["accessor"];
180  @Input() colIndex?: HeaderRendererProps["colIndex"];
181  @Input() components?: HeaderRendererProps["components"];
182
183  readonly indicator = computed(() => {
184    headerDemoSortAccessor();
185    headerDemoSortDirection();
186    const acc = this.accessorStr();
187    const isSorted = headerDemoSortAccessor() === acc;
188    const dir = isSorted ? headerDemoSortDirection() : null;
189    return dir === "asc" ? " ▲" : dir === "desc" ? " ▼" : "";
190  });
191
192  onClick(): void {
193    cycleHeaderDemoSort(this.accessorStr());
194  }
195
196  onKeydown(e: KeyboardEvent): void {
197    if (e.key === "Enter") this.onClick();
198  }
199}
200

1<script setup lang="ts">
2import { ref, computed, defineComponent, h } from "vue";
3import { SimpleTable } from "@simple-table/vue";
4import type { Theme, VueColumnDef, GetRowIdParams } from "@simple-table/vue";
5import { headerRendererConfig } from "./header-renderer.demo-data";
6import type { HeaderEmployee } from "./header-renderer.demo-data";
7import "@simple-table/vue/styles.css";
8
9const props = withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
10  height: "400px",
11});
12
13type SortDir = "asc" | "desc" | null;
14const CYCLE: SortDir[] = ["asc", "desc", null];
15
16const sortAccessor = ref<string | null>(null);
17const sortDirection = ref<SortDir>(null);
18
19const sortedData = computed(() => {
20  if (!sortAccessor.value || !sortDirection.value) return [...headerRendererConfig.rows];
21  const acc = sortAccessor.value;
22  const dir = sortDirection.value;
23  return [...headerRendererConfig.rows].sort((a, b) => {
24    const aVal = a[acc as keyof HeaderEmployee];
25    const bVal = b[acc as keyof HeaderEmployee];
26    if (aVal === bVal) return 0;
27    const cmp =
28      typeof aVal === "number" && typeof bVal === "number"
29        ? aVal - bVal
30        : String(aVal).localeCompare(String(bVal));
31    return dir === "asc" ? cmp : -cmp;
32  });
33});
34
35function makeSortableHeader(col: VueColumnDef<HeaderEmployee>) {
36  return defineComponent({
37    name: `SortHeader-${String(col.accessor)}`,
38    setup() {
39      return () => {
40        const isSorted = sortAccessor.value === col.accessor;
41        const dir = isSorted ? sortDirection.value : null;
42        const indicator = dir === "asc" ? " ▲" : dir === "desc" ? " ▼" : "";
43        const handleClick = () => {
44          if (!isSorted) {
45            sortAccessor.value = col.accessor as string;
46            sortDirection.value = "asc";
47            return;
48          }
49          const idx = CYCLE.indexOf(dir);
50          const next = CYCLE[(idx + 1) % CYCLE.length];
51          if (next) {
52            sortAccessor.value = col.accessor as string;
53            sortDirection.value = next;
54          } else {
55            sortAccessor.value = null;
56            sortDirection.value = null;
57          }
58        };
59        return h(
60          "div",
61          {
62            onClick: handleClick,
63            style: {
64              cursor: "pointer",
65              userSelect: "none",
66              fontWeight: "600",
67              display: "flex",
68              alignItems: "center",
69              gap: "4px",
70            },
71          },
72          [
73            h("span", col.label as string),
74            indicator
75              ? h("span", { style: { fontSize: "10px", color: "#6366f1" } }, indicator)
76              : null,
77          ],
78        );
79      };
80    },
81  });
82}
83
84const headers = computed((): VueColumnDef<HeaderEmployee>[] =>
85  headerRendererConfig.headers.map((col) => ({
86    ...col,
87    sortable: false,
88    headerRenderer: makeSortableHeader(col),
89  })),
90);
91
92const getRowId = ({ row }: GetRowIdParams<HeaderEmployee>) => row.id;
93</script>
94
95<template>
96  <SimpleTable
97    :columns="headers"
98    :rows="sortedData"
99    :get-row-id="getRowId"
100    :height="props.height"
101    :theme="props.theme"
102  />
103</template>

1<script lang="ts">
2  import { SimpleTable } from "@simple-table/svelte";
3  import type { Theme, SvelteColumnDef, GetRowIdParams } from "@simple-table/svelte";
4  import { headerRendererConfig } from "./header-renderer.demo-data";
5  import type { HeaderEmployee } from "./header-renderer.demo-data";
6  import HeaderSortableHeader from "./HeaderSortableHeader.svelte";
7  import { headerDemoSortAccessor, headerDemoSortDirection } from "./header-sort-store";
8  import "@simple-table/svelte/styles.css";
9
10  let { height = "400px", theme }: { height?: string | number; theme?: Theme } = $props();
11
12  const getRowId = ({ row }: GetRowIdParams<HeaderEmployee>) => row.id;
13
14  const sortedData = $derived.by(() => {
15    const acc = $headerDemoSortAccessor as keyof HeaderEmployee | null;
16    const dir = $headerDemoSortDirection;
17    if (!acc || !dir) return [...headerRendererConfig.rows];
18    return [...headerRendererConfig.rows].sort((a, b) => {
19      const aVal = a[acc];
20      const bVal = b[acc];
21      if (aVal === bVal) return 0;
22      const cmp =
23        typeof aVal === "number" && typeof bVal === "number"
24          ? aVal - bVal
25          : String(aVal).localeCompare(String(bVal));
26      return dir === "asc" ? cmp : -cmp;
27    });
28  });
29
30  const headers = $derived(
31    headerRendererConfig.headers.map(
32      (h): SvelteColumnDef<HeaderEmployee> => ({
33        ...h,
34        sortable: false,
35        headerRenderer: HeaderSortableHeader,
36      }),
37    ),
38  );
39</script>
40
41<SimpleTable columns={headers} rows={sortedData} {getRowId} {height} {theme} />
42
43
44// HeaderSortableHeader.svelte
45<script lang="ts">
46  import type { HeaderRendererProps } from "@simple-table/svelte";
47  import type { HeaderEmployee } from "./header-renderer.demo-data";
48  import {
49    headerDemoSortAccessor,
50    headerDemoSortDirection,
51    cycleHeaderDemoSort,
52  } from "./header-sort-store";
53
54  let { header }: HeaderRendererProps<HeaderEmployee> = $props();
55  const accessor = $derived(String(header.accessor));
56  const isSorted = $derived($headerDemoSortAccessor === accessor);
57  const dir = $derived(isSorted ? $headerDemoSortDirection : null);
58  const indicator = $derived(dir === "asc" ? " ▲" : dir === "desc" ? " ▼" : "");
59</script>
60
61<div
62  style="cursor:pointer;user-select:none;font-weight:600;display:flex;align-items:center;gap:4px;"
63  onclick={() => cycleHeaderDemoSort(accessor)}
64  onkeydown={(e) => e.key === "Enter" && cycleHeaderDemoSort(accessor)}
65  role="button"
66  tabindex="0"
67>
68  <span>{header.label}</span>
69  {#if indicator}
70    <span style="font-size:10px;color:#6366f1;">{indicator}</span>
71  {/if}
72</div>
73

1import { createSignal, createMemo } from "solid-js";
2import {SimpleTable} from "@simple-table/solid";import type { Theme, SolidColumnDef, HeaderRendererProps } from "@simple-table/solid";
3import { headerRendererConfig, type HeaderEmployee } from "./header-renderer.demo-data";
4import "@simple-table/solid/styles.css";
5
6type SortDir = "asc" | "desc" | null;
7const CycleOrder: SortDir[] = ["asc", "desc", null];
8
9export default function HeaderRendererDemo(props: { height?: string | number; theme?: Theme }) {
10  const [sortAccessor, setSortAccessor] = createSignal<string | null>(null);
11  const [sortDirection, setSortDirection] = createSignal<SortDir>(null);
12
13  const sortedData = createMemo(() => {
14    const acc = sortAccessor();
15    const dir = sortDirection();
16    if (!acc || !dir) return [...headerRendererConfig.rows];
17    return [...headerRendererConfig.rows].sort((a, b) => {
18      const key = acc as keyof HeaderEmployee;
19      const aVal = a[key];
20      const bVal = b[key];
21      if (aVal === bVal) return 0;
22      const cmp = typeof aVal === "number" && typeof bVal === "number"
23        ? aVal - bVal
24        : String(aVal).localeCompare(String(bVal));
25      return dir === "asc" ? cmp : -cmp;
26    });
27  });
28
29  const headers = createMemo((): SolidColumnDef<HeaderEmployee>[] =>
30    headerRendererConfig.headers.map((h) => ({
31      ...h,
32      sortable: false,
33      headerRenderer: ({ accessor }: HeaderRendererProps<HeaderEmployee>) => {
34        const isSorted = sortAccessor() === accessor;
35        const dir = isSorted ? sortDirection() : null;
36        const indicator = dir === "asc" ? " ▲" : dir === "desc" ? " ▼" : "";
37
38        const handleClick = () => {
39          if (!isSorted) {
40            setSortAccessor(accessor as string);
41            setSortDirection("asc");
42            return;
43          }
44          const idx = CycleOrder.indexOf(dir);
45          const next = CycleOrder[(idx + 1) % CycleOrder.length];
46          setSortAccessor(next ? (accessor as string) : null);
47          setSortDirection(next);
48        };
49
50        return (
51          <div
52            onClick={handleClick}
53            style={{
54              cursor: "pointer",
55              "user-select": "none",
56              "font-weight": "600",
57              display: "flex",
58              "align-items": "center",
59              gap: "4px",
60            }}
61          >
62            <span>{h.label}</span>
63            {indicator && (
64              <span style={{ "font-size": "10px", color: "#6366f1" }}>{indicator}</span>
65            )}
66          </div>
67        );
68      },
69    }))
70  );
71
72  return (
73    <SimpleTable
74      columns={headers()}
75      getRowId={({ row }) => row.id}
76      rows={sortedData()}
77      height={props.height ?? "400px"}
78      theme={props.theme}
79    />
80  );
81}