From b95b376451c492bf48bf783f5306c4f3fed22fdb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?=
 <webJose@gmail.com>
Date: Fri, 16 Aug 2024 20:35:32 -0600
Subject: [PATCH] feat(demo): Add per-column features demonstration

Closes Enhance the demo page to allow demonstration of per-column features #12
---
 src/demolib/AllColumnsDropdown.svelte |  34 +++++
 src/demolib/ColumnList.svelte         |  80 +++++++++++
 src/demolib/FavButtonMenuItem.svelte  |  29 ++++
 src/demolib/FavMenuItem.svelte        |  29 ++++
 src/demolib/GlassyDropdownMenu.svelte |  26 ++++
 src/demolib/HeaderCell.svelte         | 182 ++++++++++++++++++++++++++
 src/index.html                        |   2 +-
 src/routes/+layout.svelte             |   6 +-
 src/routes/+page.svelte               |  65 +++++----
 src/routes/sales/+page.svelte         |  20 ++-
 src/routes/sales/ByCityView.svelte    |  20 ++-
 src/routes/sales/DetailedView.svelte  |  39 +++++-
 src/routes/sales/HeaderCell.svelte    |  58 --------
 13 files changed, 494 insertions(+), 96 deletions(-)
 create mode 100644 src/demolib/AllColumnsDropdown.svelte
 create mode 100644 src/demolib/ColumnList.svelte
 create mode 100644 src/demolib/FavButtonMenuItem.svelte
 create mode 100644 src/demolib/FavMenuItem.svelte
 create mode 100644 src/demolib/GlassyDropdownMenu.svelte
 create mode 100644 src/demolib/HeaderCell.svelte
 delete mode 100644 src/routes/sales/HeaderCell.svelte

diff --git a/src/demolib/AllColumnsDropdown.svelte b/src/demolib/AllColumnsDropdown.svelte
new file mode 100644
index 0000000..a6225f0
--- /dev/null
+++ b/src/demolib/AllColumnsDropdown.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import ColumnList, { type Column } from "./ColumnList.svelte";
+    import GlassyDropdownMenu from "./GlassyDropdownMenu.svelte";
+
+    type Props = {
+        columns: Column[];
+    };
+
+    let {
+        columns = $bindable(),
+    }: Props = $props();
+
+    let btn: HTMLButtonElement;
+
+    function getDd() {
+        return (globalThis as any).bootstrap.Dropdown.getInstance(btn);
+    }
+</script>
+<div class="dropdown">
+    <button
+        class="btn btn-neutral btn-sm"
+        type="button"
+        data-bs-toggle="dropdown"
+        title="Columns"
+        aria-expanded="false"
+        data-bs-auto-close="false"
+        bind:this={btn}
+    >
+        <i class="bi bi-layout-sidebar-inset"></i>
+    </button>
+    <GlassyDropdownMenu shadow>
+        <ColumnList bind:columns onClose={() => getDd().hide()} />
+    </GlassyDropdownMenu>
+</div>
diff --git a/src/demolib/ColumnList.svelte b/src/demolib/ColumnList.svelte
new file mode 100644
index 0000000..c49f58a
--- /dev/null
+++ b/src/demolib/ColumnList.svelte
@@ -0,0 +1,80 @@
+<script context="module" lang="ts">
+    export type Column = { key: string; text: string; hidden?: boolean };
+</script>
+
+<script lang="ts">
+    import { nextControlId } from '$lib/utils.js';
+
+    type Props = {
+        columns: Column[];
+        newColumnThreshold?: number;
+        maxColumns?: number;
+        onClose?: () => void;
+    };
+
+    let { columns = $bindable(), newColumnThreshold = 5, maxColumns = 4, onClose }: Props = $props();
+
+    let thisId = nextControlId();
+    let numColumns = $derived(
+        Math.min(
+            maxColumns,
+            Math.floor(columns.length / newColumnThreshold) + (columns.length % newColumnThreshold !== 0 ? 1 : 0),
+        ),
+    );
+    let numRows = $derived(Math.floor(columns.length / numColumns) + (columns.length % numColumns !== 0 ? 1 : 0));
+
+    function onInputHandler(col: Column, checked: boolean) {
+        col.hidden = !checked;
+    }
+</script>
+
+<div class="d-flex flex-row flex-nowrap px-4 pt-2 align-items-baseline">
+    <h6 class="me-3">Available Columns</h6>
+    <button
+        type="button"
+        class="btn btn-sm btn-secondary ms-auto me-2"
+        onclick="{() => columns.forEach((c) => (c.hidden = false))}">Select all</button
+    >
+    <button type="button" class="btn-close align-self-center" aria-label="Close" onclick="{() => onClose?.()}"></button>
+</div>
+<div class="px-4 py-2">
+    <table class="table table-sm table-borderless">
+        <tbody>
+            {#each { length: numRows } as _, rowIndex}
+                <tr>
+                    {#each { length: numColumns } as _, colIndex}
+                        {@const remainder = columns.length % numColumns}
+                        {@const remainderConsumed = colIndex >= remainder}
+                        {@const col =
+                            remainderConsumed && remainder > 0 && rowIndex + 1 === numRows
+                                ? undefined
+                                : columns[
+                                      (remainderConsumed ? remainder : colIndex) * numRows +
+                                          (remainderConsumed ? colIndex - remainder : 0) *
+                                              (numRows - (remainder > 0 ? 1 : 0)) +
+                                          rowIndex
+                                  ]}
+                        <td>
+                            {#if col}
+                                <input
+                                    type="checkbox"
+                                    class="form-check-input"
+                                    id="{thisId}_{col.key}"
+                                    checked="{!col.hidden}"
+                                    oninput="{(ev) => onInputHandler(col, ev.currentTarget.checked)}"
+                                />
+                                <label for="{thisId}_{col.key}" class="me-3">{col.text}</label>
+                            {/if}
+                        </td>
+                    {/each}
+                </tr>
+            {/each}
+        </tbody>
+    </table>
+</div>
+
+<style>
+    table {
+        --bs-table-bg: transparent;
+    }
+</style>
diff --git a/src/demolib/FavButtonMenuItem.svelte b/src/demolib/FavButtonMenuItem.svelte
new file mode 100644
index 0000000..68e4048
--- /dev/null
+++ b/src/demolib/FavButtonMenuItem.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { combineClasses } from "$lib/utils.js";
+    import type { Snippet } from "svelte";
+    import FavMenuItem from "./FavMenuItem.svelte";
+
+    type Props = {
+        pinPreference: boolean | undefined;
+        class?: string;
+        children: Snippet;
+        onClick?: () => void;
+    };
+
+    let {
+        pinPreference = $bindable(),
+        class: cssClass,
+        children,
+        onClick,
+    }: Props = $props();
+</script>
+
+<FavMenuItem bind:pinPreference>
+    <button
+        type="button"
+        class={combineClasses("btn btn-neutral rounded-0 text-start flex-fill pe-4", cssClass)}
+        onclick={() => onClick?.()}
+    >
+        {@render children()}
+    </button>
+</FavMenuItem>
diff --git a/src/demolib/FavMenuItem.svelte b/src/demolib/FavMenuItem.svelte
new file mode 100644
index 0000000..f72eef3
--- /dev/null
+++ b/src/demolib/FavMenuItem.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { nextControlId } from "$lib/utils.js";
+    import type { Snippet } from "svelte";
+
+    type Props = {
+        pinPreference: boolean | undefined;
+        noMenuItem?: boolean;
+        children: Snippet;
+    };
+
+    let {
+        pinPreference = $bindable(),
+        noMenuItem = false,
+        children,
+    }: Props = $props();
+
+    let thisId = nextControlId();
+</script>
+
+<div class="d-flex flex-row p-0" class:dropdown-item={!noMenuItem}>
+    {@render children()}
+    <input type="checkbox" class="btn-check" bind:checked={pinPreference} id="{thisId}_pinpref">
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <label for="{thisId}_pinpref" class="btn btn-neutral rounded-0 flex-grow-0" onclick={(e) => e.stopPropagation()}>
+        <!-- <i class="bi bi-{pinPreference ? 'star-fill' : 'star'}"></i> -->
+        <i class="bi bi-stars"></i>
+    </label>
+</div>
diff --git a/src/demolib/GlassyDropdownMenu.svelte b/src/demolib/GlassyDropdownMenu.svelte
new file mode 100644
index 0000000..305d31e
--- /dev/null
+++ b/src/demolib/GlassyDropdownMenu.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
+
+    type Props = HTMLAttributes<HTMLDivElement> & {
+        children?: Snippet;
+        shadow?: boolean;
+    };
+
+    let {
+        children,
+        shadow,
+        ...restProps
+    }: Props = $props();
+</script>
+
+<div class="dropdown-menu bg-glass" class:shadow {...restProps}>
+    {@render children?.()}
+</div>
+
+<style lang="scss">
+    .bg-glass {
+        background-color: rgba(var(--bs-body-bg-rgb), 0.3);
+        backdrop-filter: blur(7px) saturate(110%);
+    }
+</style>
diff --git a/src/demolib/HeaderCell.svelte b/src/demolib/HeaderCell.svelte
new file mode 100644
index 0000000..c7d7194
--- /dev/null
+++ b/src/demolib/HeaderCell.svelte
@@ -0,0 +1,182 @@
+<script context="module">
+    export type HeaderColumn<TRow extends Record<string, any> = Record<string, any>, TCol extends Record<string, any> = Record<string, any>> = 
+        WjDvColumn<TRow, TCol> & {
+            alignment: ColAlignment;
+            pinnedFunctions: {
+                pin?: boolean;
+                hide?: boolean;
+                align?: boolean;
+                textWrap?: boolean;
+            };
+        };
+
+    const allAlignments: ColAlignment[] = [
+        'start',
+        'center',
+        'end'
+    ];
+
+    const alignmentIcons: Record<ColAlignment, string> = {
+        'center': 'text-center',
+        'end': 'text-right',
+        'start': 'text-left'
+    };
+</script>
+<script lang="ts" generics="TRow extends Record<string, any> = Record<string, any>, TCol extends Record<string, any> = Record<string, any>">
+    import { nextControlId } from "$lib/utils.js";
+    import type { ColAlignment, WjDvColumn } from "$lib/WjDataView/WjDataView.svelte";
+    import FavButtonMenuItem from "./FavButtonMenuItem.svelte";
+    import FavMenuItem from "./FavMenuItem.svelte";
+    import GlassyDropdownMenu from "./GlassyDropdownMenu.svelte";
+    import keyStateStore from './keyStateStore.svelte.js';
+
+    type Props = {
+        col: HeaderColumn<TRow, TCol>;
+        maxWidth?: string;
+    };
+
+    let {
+        col = $bindable(),
+        maxWidth,
+    }: Props = $props();
+
+    let id = nextControlId();
+    let pinIcon = $derived(`bi-pin-${col.pinned ? 'fill' : 'angle'}`);
+    let textWrap = $state(!col.noTextWrap);
+    let colAlignmentIndex = $derived(allAlignments.findIndex(a => a === (col.alignment ?? 'start')));
+    let alignmentIcon = $derived(alignmentIcons[allAlignments[keyStateStore.ctrl ? previousAlignmentIndex() : nextAlignmentIndex()]]);
+
+    $effect.pre(() => {
+        col.noTextWrap = !textWrap;
+    });
+    $effect.pre(() => {
+        if (typeof col.minWidth === 'number' && col.minWidth > (col.width ?? Number.MAX_VALUE)) {
+            col.width = col.minWidth
+        }
+    });
+
+    function nextAlignmentIndex() {
+        return (colAlignmentIndex + 1) % allAlignments.length;
+    }
+
+    function previousAlignmentIndex() {
+        return (colAlignmentIndex - 1 + allAlignments.length) % allAlignments.length;
+    }
+
+    function changeAlignment(ev: MouseEvent) {
+        col.alignment = allAlignments[ev.ctrlKey ? previousAlignmentIndex() : nextAlignmentIndex()];
+    }
+</script>
+
+<div class="d-flex flex-row ps-2">
+    <div class="dropdown">
+        <button
+            type="button"
+            data-bs-toggle="dropdown"
+            data-bs-target="{id}_ddmenu"
+            aria-expanded="false"
+            class="btn btn-sm btn-neutral dropdown-toggle flex-shrink-1"
+        >
+            <span class="fw-semibold text-nowrap text-truncate">{col.text}</span>
+        </button>
+        <GlassyDropdownMenu shadow id="{id}_ddmenu">
+            <h6 class="px-3">Minimum Width</h6>
+            <div class="d-flex flex-column flex-nowrap px-3 py-1 fs-6">
+                <input
+                    type="range"
+                    class="form-range"
+                    list="{id}_{col.key}_minwidth_dl"
+                    id="{id}_{col.key}_minwidth"
+                    min="3"
+                    max="15"
+                    step="0.1"
+                    bind:value={col.minWidth}
+                >
+                <datalist id="{id}_{col.key}_minwidth_dl">
+                    <option value="3">3</option>
+                    <option value="5">5</option>
+                    <option value="7">7</option>
+                </datalist>
+                <span class="ms-1 force-max-content font-monospace fw-bold text-center">
+                    {typeof col.minWidth !== 'number' ? '(not set)' : `${col.minWidth.toFixed(1)} em`}
+                </span>
+            </div>
+            <div class="dropdown-divider"></div>
+            <h6 class="px-3">Alignment</h6>
+            <FavMenuItem noMenuItem bind:pinPreference={col.pinnedFunctions.align}>
+                <div class="btn-toolbar px-3 flex-fill align-self-center">
+                    <div class="btn-group btn-group-sm me-1">
+                        <input type="radio" name="{id}_{col.key}_alignment" bind:group={col.alignment} value='start' class="btn-check" id="{id}_{col.key}_align_left">
+                        <label for="{id}_{col.key}_align_left" title="Align left" class="btn btn-outline-primary">
+                            <i class="bi bi-text-left"></i>
+                        </label>
+                        <input type="radio" name="{id}_{col.key}_alignment" bind:group={col.alignment} value='center' class="btn-check" id="{id}_{col.key}_align_center">
+                        <label for="{id}_{col.key}_align_center" title="Align center" class="btn btn-outline-primary">
+                            <i class="bi bi-text-center"></i>
+                        </label>
+                        <input type="radio" name="{id}_{col.key}_alignment" bind:group={col.alignment} value='end' class="btn-check" id="{id}_{col.key}_align_right">
+                        <label for="{id}_{col.key}_align_right" title="Align right" class="btn btn-outline-primary">
+                            <i class="bi bi-text-right"></i>
+                        </label>
+                    </div>
+                </div>
+            </FavMenuItem>
+            <div class="dropdown-divider"></div>
+            <FavButtonMenuItem
+                class={textWrap ? 'active' : undefined}
+                bind:pinPreference={col.pinnedFunctions.textWrap}
+                onClick={() => textWrap = !textWrap}
+            >
+                <i class="bi bi-text-wrap"></i>
+                Text wrap
+            </FavButtonMenuItem>
+            <div class="dropdown-divider"></div>
+            <FavButtonMenuItem bind:pinPreference={col.pinnedFunctions.hide} onClick={() => col.hidden = true}>
+                <i class="bi bi-eye-slash me-2"></i>
+                Hide column
+            </FavButtonMenuItem>
+            <FavButtonMenuItem bind:pinPreference={col.pinnedFunctions.pin} onClick={() => col.pinned = !col.pinned}>
+                <i class="bi {pinIcon} me-2"></i>
+                {col.pinned ? 'Unpin' : 'Pin'} column
+            </FavButtonMenuItem>
+        </GlassyDropdownMenu>
+    </div>
+    <div class="d-flex flex-row flex-nowrap ms-auto">
+        {#if col.pinnedFunctions.align}
+            <button
+                type="button"
+                class="btn btn-neutral btn-sm ms-auto"
+                title="Click: Next alignment; Ctrl + Click: Previous alignment"
+                onclick={changeAlignment}
+            >
+                <i class="bi bi-{alignmentIcon}"></i>
+            </button>
+        {/if}
+        {#if col.pinnedFunctions.textWrap}
+            <input type="checkbox" class="btn-check" id="{id}_textwrap" bind:checked={textWrap}>
+            <label for="{id}_textwrap" class="btn btn-neutral btn-sm">
+                <i class="bi bi-text-wrap"></i>
+            </label>
+        {/if}
+        {#if col.pinnedFunctions.hide}
+            <button type="button" class="btn btn-sm btn-neutral" onclick={() => col.hidden = true}>
+                <span title="Click to {col.pinned ? 'un' : ''}pin">
+                    <i class="bi bi-eye-slash"></i>
+                </span>
+            </button>
+        {/if}
+        {#if col.pinnedFunctions.pin}
+            <button type="button" class="btn btn-sm btn-neutral" onclick={() => col.pinned = !col.pinned}>
+                <span title="Click to {col.pinned ? 'un' : ''}pin">
+                    <i class="bi {pinIcon}"></i>
+                </span>
+            </button>
+        {/if}
+    </div>
+</div>
+
+<style>
+    .force-max-content {
+        min-width: max-content;
+    }
+</style>
diff --git a/src/index.html b/src/index.html
index 42068d8..d12b3c6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -20,6 +20,6 @@
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div>%sveltekit.body%</div>
-		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 	</body>
 </html>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f638b0d..ffcaa1c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,13 +1,17 @@
 <script lang="ts">
     import { base } from "$app/paths";
     import pkgJson from 'packagejson';
-    import type { Snippet } from "svelte";
+    import { onMount, type Snippet } from "svelte";
     import "../app.scss";
     import ThemeSwitch from "./ThemeSwitch.svelte";
 
     let { children }: {
         children: Snippet
     } = $props();
+
+    onMount(() => {
+        (globalThis as any).bootstrap.Dropdown.Default.popperConfig = { strategy: "fixed" };
+    });
 </script>
 
 <div class="d-flex flex-column doc-container">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ddd7e34..df7fb8c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,11 +2,13 @@
     import { goto } from "$app/navigation";
     import { base } from "$app/paths";
     import { page } from "$app/stores";
-    import WjDataView, { type WjDvColumn, type WjDvRow } from "$lib/WjDataView/WjDataView.svelte";
+    import WjDataView, { type WjDvRow } from "$lib/WjDataView/WjDataView.svelte";
     import WjDataViewTheme from "$lib/WjDataViewTheme/WjDataViewTheme.svelte";
     import type { Person } from "../data-models.js";
+    import AllColumnsDropdown from "../demolib/AllColumnsDropdown.svelte";
     import { demoOptions } from "../demolib/demoOptions.svelte.js";
     import EditInGitHub from "../demolib/EditInGitHub.svelte";
+    import HeaderCell, { type HeaderColumn } from "../demolib/HeaderCell.svelte";
     import Numeric from "../demolib/Numeric.svelte";
     import { themeOptions } from "../demolib/themeOptions.svelte.js";
     import MoreInfo from "./MoreInfo.svelte";
@@ -24,52 +26,75 @@
         gridData = data.data;
     });
 
-    let columns = $state<WjDvColumn<Person>[]>([
+    let columns = $state<HeaderColumn<Person>[]>([
         {
             key: 'id',
             text: 'ID',
             width: 5,
             resizable: false,
-            pinned: true
+            pinned: true,
+            alignment: 'start',
+            pinnedFunctions: {},
         },
         {
             key: 'first_name',
             text: 'First Name',
             minWidth: 5,
-            hidden: false
+            hidden: false,
+            alignment: 'start',
+            pinnedFunctions: {},
         },
         {
             key: 'last_name',
             text: 'Last Name',
+            alignment: 'start',
+            pinnedFunctions: {},
+        },
+        {
+            key: 'full_name',
+            text: 'Full Name',
+            width: 9,
+            get: (r) => `${r.gender === 'Female' ? 'Mrs.' : 'Mr.' } ${r.last_name}, ${r.first_name}`,
+            alignment: 'start',
+            pinnedFunctions: {},
         },
         {
             key: 'email',
             text: 'E-Mail',
-            pinned: true
+            pinned: true,
+            alignment: 'start',
+            pinnedFunctions: {},
         },
         {
             key: 'gender',
             text: 'Gender',
-            alignment: 'center'
+            alignment: 'center',
+            pinnedFunctions: {},
         },
         {
             key: 'birth_date',
             text: 'Birth Date',
             noTextWrap: true,
+            alignment: 'start',
+            pinnedFunctions: {},
         },
         {
             key: 'country_code',
             text: 'Country Code',
+            alignment: 'start',
+            pinnedFunctions: {},
         },
         {
             key: 'credit_score',
             text: 'Credit Score',
-            alignment: 'end'
+            alignment: 'end',
+            pinnedFunctions: {},
         },
         {
             key: 'net_worth',
             text: 'Net Worth',
-            alignment: 'end'
+            alignment: 'end',
+            pinnedFunctions: {},
         },
     ]);
 
@@ -152,7 +177,7 @@ import &#123; WjDataView &#125; from '@wjfe/dataview';</pre>
                 }}
             >
                 {#snippet controlHeaderCell()}
-                    <div class="ps-2">
+                    <div class="ps-2 d-flex flex-row flex-nowrap gap-1">
                         <input
                             type="checkbox"
                             class="form-check-input"
@@ -160,15 +185,13 @@ import &#123; WjDataView &#125; from '@wjfe/dataview';</pre>
                             checked={!!allSelected}
                             oninput="{ev => selectAllData(ev.currentTarget.checked)}"
                         >
+                        <AllColumnsDropdown bind:columns />
                     </div>
                 {/snippet}
                 {#snippet controlDataCell(ctx)}
                     <div class="px-2 d-flex flex-row gap-1">
-                        <input
-                            type="checkbox"
-                            class="form-check-input"
-                            bind:checked={ctx.row.wjdv.selected}
-                        >
+                        <!-- svelte-ignore binding_property_non_reactive -->
+                        <input type="checkbox" class="form-check-input" bind:checked={ctx.row.wjdv.selected}>
                         <button
                             type="button"
                             class="btn btn-sm btn-neutral"
@@ -179,21 +202,15 @@ import &#123; WjDataView &#125; from '@wjfe/dataview';</pre>
                     </div>
                 {/snippet}
                 {#snippet headerCell(ctx)}
-                    <div class="d-flex flex-row ps-2">
-                        <span class="fw-semibold text-nowrap text-truncate">{ctx.col.text}</span>
-                        <button class="btn btn-sm ms-auto" onclick={() => ctx.col.pinned = !ctx.col.pinned}>
-                            <span title="Click to {ctx.col.pinned ? 'un' : ''}pin">
-                                <i class="bi bi-pin-{ctx.col.pinned ? 'fill' : 'angle'}"></i>
-                            </span>
-                        </button>
-                    </div>
+                    <!-- svelte-ignore binding_property_non_reactive -->
+                    <HeaderCell bind:col={ctx.col} maxWidth="20em" />
                 {/snippet}
                 {#snippet dataCell(ctx)}
-                    <div class="data px-2 text-truncate">
+                    <div class="data px-2" class:text-truncate={ctx.col.noTextWrap}>
                         {#if ctx.col.key === 'credit_score' || ctx.col.key === 'net_worth'}
                             <Numeric value={ctx.row[ctx.col.key]} />
                         {:else}
-                            {ctx.row[ctx.col.key as keyof typeof ctx.row]}
+                            {ctx.getFn(ctx.row)}
                         {/if}
                     </div>
                 {/snippet}
diff --git a/src/routes/sales/+page.svelte b/src/routes/sales/+page.svelte
index 87ff306..365d3d2 100644
--- a/src/routes/sales/+page.svelte
+++ b/src/routes/sales/+page.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
-    import WjDataView, { defineData, type WjDvColumn } from '$lib/WjDataView/WjDataView.svelte';
+    import WjDataView, { defineData } from '$lib/WjDataView/WjDataView.svelte';
     import WjDataViewTheme from '$lib/WjDataViewTheme/WjDataViewTheme.svelte';
     import type { GeoSaleByCountry, GeoSaleColumn } from '../../data-models.js';
+    import AllColumnsDropdown from '../../demolib/AllColumnsDropdown.svelte';
     import EditInGitHub from '../../demolib/EditInGitHub.svelte';
     import { globalOptions } from '../../demolib/GlobalOptions.svelte.js';
+    import HeaderCell, { type HeaderColumn } from '../../demolib/HeaderCell.svelte';
     import { amountFormatterFactory, currencyFormatter } from '../../demolib/numberFormatters.js';
     import Numeric from '../../demolib/Numeric.svelte';
     import { themeOptions } from '../../demolib/themeOptions.svelte.js';
@@ -14,7 +16,6 @@
     import { dataViewOptions } from './dataViewOptions.js';
     import DrilldownButton from './DrilldownButton.svelte';
     import FirstLevelInfo from './FirstLevelInfo.svelte';
-    import HeaderCell from './HeaderCell.svelte';
     import SecondLevelInfo from './SecondLevelInfo.svelte';
     import ThirdLevelInfo from './ThirdLevelInfo.svelte';
     import Toolbar from './Toolbar.svelte';
@@ -28,11 +29,13 @@
     }: Props = $props();
 
     let dvOptions = $state(dataViewOptions());
-    let columns1 = $state<WjDvColumn<GeoSaleByCountry, GeoSaleColumn>[]>([
+    let columns = $state<HeaderColumn<GeoSaleByCountry, GeoSaleColumn>[]>([
         {
             key: 'country',
             text: 'Country',
+            alignment: 'start',
             get: getCountry,
+            pinnedFunctions: {},
         },
         {
             key: 'sales_amount',
@@ -40,6 +43,7 @@
             alignment: 'end',
             dataType: 'real-amount',
             numberFormatter: amountFormatterFactory(2),
+            pinnedFunctions: {},
         },
         {
             key: 'quantity_sold',
@@ -47,6 +51,7 @@
             alignment: 'end',
             dataType: 'int-amount',
             numberFormatter: amountFormatterFactory(0),
+            pinnedFunctions: {},
         },
         {
             key: 'total_sales',
@@ -54,6 +59,7 @@
             alignment: 'end',
             dataType: 'currency',
             numberFormatter: currencyFormatter,
+            pinnedFunctions: {},
         },
         {
             key: 'total_costs',
@@ -61,6 +67,7 @@
             alignment: 'end',
             dataType: 'currency',
             numberFormatter: currencyFormatter,
+            pinnedFunctions: {},
         },
     ]);
     let data1 = $state(defineData(data.byCountry, m => m.country_code));
@@ -93,7 +100,7 @@
     >
         <WjDataViewTheme theme={themeOptions.currentTheme}>
             <WjDataView
-                bind:columns={columns1}
+                bind:columns
                 bind:data={data1}
                 striped={dvOptions.striping}
                 rowTracking={dvOptions.rowTracking}
@@ -103,13 +110,18 @@
                 class="position-absolute top-0 bottom-0"
                 controlColumn={{
                     width: 3,
+                    resizable: false,
                     alignment: 'center',
+                    pinnedFunctions: {},
                 }}
                 style="z-index: 5"
             >
                 {#snippet caption()}
                     <DataViewCaption title="Global Overview" />
                 {/snippet}
+                {#snippet controlHeaderCell()}
+                    <AllColumnsDropdown bind:columns />
+                {/snippet}
                 {#snippet controlDataCell(ctx)}
                     <!-- svelte-ignore binding_property_non_reactive -->
                     <DrilldownButton bind:row={ctx.row} />
diff --git a/src/routes/sales/ByCityView.svelte b/src/routes/sales/ByCityView.svelte
index 704138d..445dac9 100644
--- a/src/routes/sales/ByCityView.svelte
+++ b/src/routes/sales/ByCityView.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-    import WjDataView, { defineData, GridLines, type WjDvColumn } from "$lib/WjDataView/WjDataView.svelte";
+    import WjDataView, { defineData, GridLines } from "$lib/WjDataView/WjDataView.svelte";
     import type { GeoSaleByCity, GeoSaleColumn, GeoSalesResult } from "../../data-models.js";
+    import AllColumnsDropdown from "../../demolib/AllColumnsDropdown.svelte";
     import { globalOptions } from "../../demolib/GlobalOptions.svelte.js";
+    import HeaderCell, { type HeaderColumn } from "../../demolib/HeaderCell.svelte";
     import { amountFormatterFactory, currencyFormatter } from "../../demolib/numberFormatters.js";
     import Numeric from "../../demolib/Numeric.svelte";
     import Cell from "./Cell.svelte";
     import DataViewCaption from "./DataViewCaption.svelte";
     import DetailedView from "./DetailedView.svelte";
     import DrilldownButton from "./DrilldownButton.svelte";
-    import HeaderCell from "./HeaderCell.svelte";
     import Toolbar, { type WjDataViewOptions } from "./Toolbar.svelte";
 
     type Props = {
@@ -23,11 +24,13 @@
         countryName,
     }: Props = $props();
 
-    let columns = $state<WjDvColumn<GeoSaleByCity, GeoSaleColumn>[]>([
+    let columns = $state<HeaderColumn<GeoSaleByCity, GeoSaleColumn>[]>([
         {
             key: 'city',
             text: 'City',
+            alignment: 'start',
             dataType: 'string',
+            pinnedFunctions: {},
         },
         {
             key: 'sales_amount',
@@ -35,6 +38,7 @@
             alignment: 'end',
             dataType: 'real-amount',
             numberFormatter: amountFormatterFactory(2),
+            pinnedFunctions: {},
         },
         {
             key: 'quantity_sold',
@@ -42,6 +46,7 @@
             alignment: 'end',
             dataType: 'int-amount',
             numberFormatter: amountFormatterFactory(0),
+            pinnedFunctions: {},
         },
         {
             key: 'total_sales',
@@ -49,6 +54,7 @@
             alignment: 'end',
             dataType: 'currency',
             numberFormatter: currencyFormatter,
+            pinnedFunctions: {},
         },
         {
             key: 'total_costs',
@@ -56,6 +62,7 @@
             alignment: 'end',
             dataType: 'currency',
             numberFormatter: currencyFormatter,
+            pinnedFunctions: {},
         },
     ]);
     let data = $state(defineData(
@@ -82,7 +89,9 @@
     defaultWidth={12}
     controlColumn={{
         width: 3,
-        alignment: 'center'
+        alignment: 'center',
+        resizable: false,
+        pinnedFunctions: {},
     }}
     class="mb-5"
     style="z-index: 5"
@@ -103,6 +112,9 @@
             {/if}
         </Cell>
     {/snippet}
+    {#snippet controlHeaderCell()}
+        <AllColumnsDropdown bind:columns />
+    {/snippet}
     {#snippet controlDataCell(ctx)}
         <!-- svelte-ignore binding_property_non_reactive -->
         <DrilldownButton bind:row={ctx.row} />
diff --git a/src/routes/sales/DetailedView.svelte b/src/routes/sales/DetailedView.svelte
index 0009882..efcbae5 100644
--- a/src/routes/sales/DetailedView.svelte
+++ b/src/routes/sales/DetailedView.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-    import WjDataView, { defineData, GridLines, type WjDvColumn } from "$lib/WjDataView/WjDataView.svelte";
+    import WjDataView, { defineData, GridLines } from "$lib/WjDataView/WjDataView.svelte";
     import type { GeoSale, GeoSaleColumn, GeoSalesResult } from "../../data-models.js";
+    import AllColumnsDropdown from "../../demolib/AllColumnsDropdown.svelte";
     import { globalOptions } from "../../demolib/GlobalOptions.svelte.js";
+    import HeaderCell, { type HeaderColumn } from "../../demolib/HeaderCell.svelte";
     import { amountFormatterFactory, currencyFormatter, fractionFormatter } from "../../demolib/numberFormatters.js";
     import Numeric from "../../demolib/Numeric.svelte";
     import Cell from "./Cell.svelte";
     import DataViewCaption from "./DataViewCaption.svelte";
-    import HeaderCell from "./HeaderCell.svelte";
     import type { WjDataViewOptions } from "./Toolbar.svelte";
     import Toolbar from "./Toolbar.svelte";
 
@@ -22,30 +23,42 @@
         city,
     }: Props = $props();
 
-    let columns = $state<WjDvColumn<GeoSale, GeoSaleColumn>[]>([
+    let columns = $state<HeaderColumn<GeoSale, GeoSaleColumn>[]>([
         {
             key: 'id',
             text: 'ID',
+            alignment: 'start',
+            pinnedFunctions: {},
         },
         {
             key: 'country_code',
             text: 'Country Code',
+            alignment: 'start',
+            pinnedFunctions: {},
         },
         {
             key: 'country_name',
             text: 'Country',
+            alignment: 'start',
+            pinnedFunctions: {},
         },
         {
             key: 'city',
             text: 'City',
+            alignment: 'start',
+            pinnedFunctions: {},
         },
         {
             key: 'month',
             text: 'Month',
+            alignment: 'start',
+            pinnedFunctions: {},
         },
         {
             key: 'year',
             text: 'Year',
+            alignment: 'start',
+            pinnedFunctions: {},
         },
         {
             key: 'sales_amount',
@@ -53,11 +66,14 @@
             dataType: 'real-amount',
             numberFormatter: amountFormatterFactory(2),
             alignment: 'end',
+            pinnedFunctions: {},
         },
         {
             key: 'product_category',
             text: 'Product Category',
             width: 12,
+            alignment: 'start',
+            pinnedFunctions: {},
         },
         {
             key: 'quantity_sold',
@@ -65,6 +81,7 @@
             dataType: 'int-amount',
             numberFormatter: amountFormatterFactory(0),
             alignment: 'end',
+            pinnedFunctions: {},
         },
         {
             key: 'total_sales',
@@ -72,6 +89,7 @@
             dataType: 'currency',
             numberFormatter: currencyFormatter,
             alignment: 'end',
+            pinnedFunctions: {},
         },
         {
             key: 'total_costs',
@@ -79,10 +97,13 @@
             dataType: 'currency',
             numberFormatter: currencyFormatter,
             alignment: 'end',
+            pinnedFunctions: {},
         },
         {
             key: 'top_client',
             text: 'Top Client',
+            alignment: 'start',
+            pinnedFunctions: {},
         },
         {
             key: 'top_client_fraction',
@@ -90,7 +111,8 @@
             width: 13,
             dataType: 'real-amount',
             numberFormatter: fractionFormatter,
-            alignment: 'center'
+            alignment: 'center',
+            pinnedFunctions: {},
         },
     ]);
     let data = $state(defineData(
@@ -114,6 +136,12 @@
     striped={dvOptions.striping}
     gridLines={dvOptions.gridLines}
     defaultWidth={12}
+    controlColumn={{
+        pinnedFunctions: {},
+        alignment: 'start',
+        width: 3,
+        resizable: false,
+    }}
     class="mb-5"
 >
     {#snippet caption()}
@@ -123,6 +151,9 @@
         <!-- svelte-ignore binding_property_non_reactive -->
         <HeaderCell bind:col={ctx.col} />
     {/snippet}
+    {#snippet controlHeaderCell()}
+        <AllColumnsDropdown bind:columns />
+    {/snippet}
     {#snippet dataCell(ctx)}
         <Cell>
             {#if ctx.col.numberFormatter}
diff --git a/src/routes/sales/HeaderCell.svelte b/src/routes/sales/HeaderCell.svelte
deleted file mode 100644
index 9c49450..0000000
--- a/src/routes/sales/HeaderCell.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script context="module" lang="ts">
-    const allAlignments: ColAlignment[] = [
-        'start',
-        'center',
-        'end'
-    ];
-
-    const alignmentIcons: Record<ColAlignment, string> = {
-        'center': 'text-center',
-        'end': 'text-right',
-        'start': 'text-left'
-    };
-</script>
-
-<script lang="ts" generics="TCol extends Record<string, any> = Record<string, any>, TRow extends Record<string, any> = Record<string, any>">
-    import type { ColAlignment, WjDvColumn } from '$lib/WjDataView/WjDataView.svelte';
-    import keyStateStore from '../../demolib/keyStateStore.svelte.js';
-
-    type Props = {
-        col: WjDvColumn<TRow, TCol>;
-    };
-
-    let {
-        col = $bindable(),
-    }: Props = $props();
-
-    let colAlignmentIndex = $derived(allAlignments.findIndex(a => a === (col.alignment ?? 'start')));
-    let alignmentIcon = $derived(alignmentIcons[allAlignments[keyStateStore.ctrl ? previousAlignmentIndex() : nextAlignmentIndex()]]);
-
-    function nextAlignmentIndex() {
-        return (colAlignmentIndex + 1) % allAlignments.length;
-    }
-
-    function previousAlignmentIndex() {
-        return (colAlignmentIndex - 1 + allAlignments.length) % allAlignments.length;
-    }
-
-    function changeAlignment(ev: MouseEvent) {
-        col.alignment = allAlignments[ev.ctrlKey ? previousAlignmentIndex() : nextAlignmentIndex()];
-    }
-</script>
-
-<div class="d-flex flex-row ps-2">
-    <span class="fw-semibold text-nowrap text-truncate">{col.text}</span>
-    <button
-        type="button"
-        class="btn btn-neutral btn-sm ms-auto"
-        title="Click: Next alignment; Ctrl + Click: Previous alignment"
-        onclick={changeAlignment}
-    >
-        <i class="bi bi-{alignmentIcon}"></i>
-    </button>
-    <button class="btn btn-neutral btn-sm" onclick={() => col.pinned = !col.pinned}>
-        <span title="Click to {col.pinned ? 'un' : ''}pin">
-            <i class="bi bi-pin-{col.pinned ? 'fill' : 'angle'}"></i>
-        </span>
-    </button>
-</div>