Header Renderer

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

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

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

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