wunderbaum 0.9.0 → 0.10.0

package/dist/wunderbaum.css

@@ -94,6 +94,8 @@ div.wunderbaum div.wb-header {
   position: sticky;
   top: 0;
   z-index: 2;
+  user-select: none;
+  -webkit-user-select: none; /* Safari */
 }
 div.wunderbaum div.wb-header,
 div.wunderbaum div.wb-list-container {
@@ -202,6 +204,10 @@ div.wunderbaum div.wb-header span.wb-col-resizer {
   border: none;
   border-right: 2px solid var(--wb-border-color);
   height: 100%;
+  user-select: none;
+  -webkit-user-select: none;
+}
+div.wunderbaum div.wb-header span.wb-col-resizer.wb-col-resizer-active {
   cursor: col-resize;
 }
 div.wunderbaum span.wb-col {
@@ -219,6 +225,7 @@ div.wunderbaum span.wb-col:last-of-type {
 }
 div.wunderbaum span.wb-node {
   user-select: none;
+  -webkit-user-select: none;
   /* Fix Bootstrap Icon alignment */
 }
 div.wunderbaum span.wb-node i.wb-checkbox,

package/dist/wunderbaum.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/wunderbaum.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AA2EA;AAAA;EAME;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAMF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EAGA;AAsBA;AAuBA;AAwQA;AAoHA;AA8BA;AAgEA;AAEA;AAUA;AAoBA;AAYA;;AA/iBA;EAEE;;AAIF;EACE;EACA;;AAGF;EACE;EAEA;;AAMF;EACE;EACA;EACA;;AAGF;AAAA;EAEE;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAMA;EACE;EACA;EACA;EACA;;AAIA;EACE;;AAKF;EAEE;;AAGF;EAEE;;AAGF;EACE;;AAOA;EAEE;EACA;;AAEA;EACE;;AAaN;EAEE;EACA;;AAEA;EACE;;AAON;EACE;;AAEA;EACE;;AAOF;EACE;;AAGF;EAEE;;AAGA;EACE;;AAKJ;EACE;EACA;;AAGF;EAEE;EACA;;AAEA;EAEE;;AAIJ;EACE;;AAGF;AAAA;AAAA;EAGE;EAcA;EASA;;AAGF;EAEE;;AAON;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EAIA;;AAIF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;AAqBA;;AAhBA;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;;AAIF;EACE;;AAGF;EACE;EACA;EACA;;AAMA;EACE;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;;AAGF;EACE;EAEA;EACA;EACA;EACA;EACA;;AAUI;EACE;;AAON;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIF;EACE;;AAGF;EACE;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAgBE;EACA;EACA;;AAGF;AAAA;EAEE;;AAcA;EACE;;AAWJ;EACE;;AAGF;EACE;;AAEA;EACE;;AAON;EACE;;AAEA;EACE;;AAQJ;EACE;;AASJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAMJ;EACE;;AAaJ;EACE;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;EACA;;AAGA;EACE;EACA;;AAEA;EAGE;EACA;EAGA;EACA;EACA;;AAgBR;AAAA;EAIE;EACA;EACA;;AAKF;EACE;;AAUE;AAAA;EAEE;;AAFF;AAAA;EAEE;;AAFF;AAAA;EAEE;;AAFF;AAAA;EAEE;;AAOJ;EAIE;EACA;;AAGF;AAAA;EAKE;EACA;;AAMF;AAAA;EAEE;EACA;EACA;EACA;;AAOF;EACE;;AAGF;AAAA;EAEE;;AAKA;EACE;;;AAMR;AAEA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;;AAQJ;AACA;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAIA;AAAA;EAEE;;AAGF;AAAA;EAEE;;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAIJ;AAAA;AAAA;AAMA;EACE;EACA;;;AAGF;EAGE;;;AAGF;EACE;;;AAKF;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE","file":"wunderbaum.css"}
+{"version":3,"sourceRoot":"","sources":["../src/wunderbaum.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AA2EA;AAAA;EAME;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAMF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EAGA;AAsBA;AAyBA;AA8QA;AAoHA;AA8BA;AAgEA;AAEA;AAUA;AAoBA;AAYA;;AAvjBA;EAEE;;AAIF;EACE;EACA;;AAGF;EACE;EAEA;;AAMF;EACE;EACA;EACA;EACA;EACA;;AAGF;AAAA;EAEE;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAMA;EACE;EACA;EACA;EACA;;AAIA;EACE;;AAKF;EAEE;;AAGF;EAEE;;AAGF;EACE;;AAOA;EAEE;EACA;;AAEA;EACE;;AAaN;EAEE;EACA;;AAEA;EACE;;AAON;EACE;;AAEA;EACE;;AAOF;EACE;;AAGF;EAEE;;AAGA;EACE;;AAKJ;EACE;EACA;;AAGF;EAEE;EACA;;AAEA;EAEE;;AAIJ;EACE;;AAGF;AAAA;AAAA;EAGE;EAcA;EASA;;AAGF;EAEE;;AAON;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EAIA;;AAIF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAMN;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;AAqBA;;AAhBA;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;;AAIF;EACE;;AAGF;EACE;EACA;EACA;;AAMA;EACE;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;;AAGF;EACE;EAEA;EACA;EACA;EACA;EACA;;AAUI;EACE;;AAON;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIF;EACE;;AAGF;EACE;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAgBE;EACA;EACA;;AAGF;AAAA;EAEE;;AAcA;EACE;;AAWJ;EACE;;AAGF;EACE;;AAEA;EACE;;AAON;EACE;;AAEA;EACE;;AAQJ;EACE;;AASJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAMJ;EACE;;AAaJ;EACE;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;EACA;;AAGA;EACE;EACA;;AAEA;EAGE;EACA;EAGA;EACA;EACA;;AAgBR;AAAA;EAIE;EACA;EACA;;AAKF;EACE;;AAUE;AAAA;EAEE;;AAFF;AAAA;EAEE;;AAFF;AAAA;EAEE;;AAFF;AAAA;EAEE;;AAOJ;EAIE;EACA;;AAGF;AAAA;EAKE;EACA;;AAMF;AAAA;EAEE;EACA;EACA;EACA;;AAOF;EACE;;AAGF;AAAA;EAEE;;AAKA;EACE;;;AAMR;AAEA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;;AAQJ;AACA;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAIA;AAAA;EAEE;;AAGF;AAAA;EAEE;;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAIJ;AAAA;AAAA;AAMA;EACE;EACA;;;AAGF;EAGE;;;AAGF;EACE;;;AAKF;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE","file":"wunderbaum.css"}

package/dist/wunderbaum.d.ts

@@ -374,6 +374,24 @@ declare module "util" {
     export function getOption(opts: any, name: string, defaultValue?: any): any;
     /** Convert an Array or space-separated string to a Set. */
     export function toSet(val: any): Set<string>;
+    /** Convert a pixel string to number.
+     * We accept a number or a string like '123px'. If undefined, the first default
+     * value that is a number or a string ending with 'px' is returned.
+     *
+     * Example:
+     * ```js
+     * const width = util.toPixel("123px", 100);
+     * ```
+     */
+    export function toPixel(...defaults: (string | number | undefined | null)[]): number;
+    /** Evaluate a boolean value using default if undefined.
+     * Example:
+     * ```js
+     * const opts = { flag: true };
+     * const value = util.toBool(opts.flag, otherVar, false);
+     * ```
+     */
+    export function toBool(...boolDefaults: (boolean | undefined | null)[]): boolean;
     /** Return a canonical string representation for an object's type (e.g. 'array', 'number', ...). */
     export function type(obj: any): string;
     /**
@@ -416,6 +434,8 @@ declare module "common" {
     export const RENDER_MAX_PREFETCH = 5;
     /** Skip rendering new rows when we have at least N nodes rendeed above and below the viewport. */
     export const RENDER_MIN_PREFETCH = 5;
+    /** Minimum column width if not set otherwise. */
+    export const DEFAULT_MIN_COL_WIDTH = 4;
     /** Regular expression to detect if a string describes an image URL (in contrast
      * to a class name). Strings are considered image urls if they contain '.' or '/'.
      */
@@ -1217,6 +1237,11 @@ declare module "wb_options" {
          * Default: false
          */
         fixedCol?: boolean;
+        /**
+         * Default value for ColumnDefinition.resizable option.
+         * Default: false
+         */
+        resizableColumns?: boolean;
         /**
          * Default: "multi"
          */
@@ -1386,6 +1411,8 @@ declare module "types" {
     export type TristateType = boolean | undefined;
     /** Show/hide checkbox or display a radiobutton icon instead. */
     export type CheckboxOption = boolean | "radio";
+    /** A value that can either be true, false, or undefined. */
+    export type SortOrderType = "asc" | "desc" | undefined;
     /** An icon may either be
      * a string-tag that references an entry in the `iconMap` (e.g. `"folderOpen"`)),
      * an HTML string that contains a `<` and is used as-is,
@@ -1667,6 +1694,22 @@ declare module "types" {
          * Default: `4px`.
          */
         minWidth?: string | number;
+        /** Allow user to resize the column.
+         * Default: false.
+         */
+        resizable?: boolean;
+        /** Optional custom column width when user resized by mouse drag.
+         * Default: unset.
+         */
+        customWidthPx?: number;
+        /** Allow user to sort the column.
+         * Default: false.
+         */
+        sortable?: boolean;
+        /** Optional custom column sort orde when user clicked the sort icon.
+         * Default: unset.
+         */
+        sortOrder?: SortOrderType;
         /** Optional class names that are added to all `span.wb-col` header AND data
          * elements of that column.
          */
@@ -2372,8 +2415,15 @@ declare module "drag_observer" {
     export type DragCallbackArgType = {
         /** "dragstart", "drag", or "dragstop". */
         type: string;
-        /** Original mouse or touch event that triggered the drag event. */
+        /** Original mousedown or touch event that triggered the dragstart event. */
+        startEvent: MouseEvent | TouchEvent;
+        /** Original mouse or touch event that triggered the current drag event.
+         * Note that this is not the same as `startEvent`, but a mousemove in case of
+         * a dragstart threshold.
+         */
         event: MouseEvent | TouchEvent;
+        /** Custom data that was passed to the DragObserver, typically on dragstart. */
+        customData: any;
         /** Element which is currently dragged. */
         dragElem: HTMLElement | null;
         /** Relative horizontal drag distance since start. */
@@ -2403,6 +2453,7 @@ declare module "drag_observer" {
         protected _handler: any;
         protected root: EventTarget;
         protected start: {
+            event: MouseEvent | TouchEvent | null;
             x: number;
             y: number;
             altKey: boolean;
@@ -2412,6 +2463,7 @@ declare module "drag_observer" {
         };
         protected dragElem: HTMLElement | null;
         protected dragging: boolean;
+        protected customData: object;
         protected events: string[];
         protected opts: DragObserverOptionsType;
         constructor(opts: DragObserverOptionsType);
@@ -2437,6 +2489,9 @@ declare module "wb_ext_grid" {
         protected observer: DragObserver;
         constructor(tree: Wunderbaum);
         init(): void;
+        /**
+         * Hanldes drag and sragstop events for column resizing.
+         */
         protected handleDrag(e: DragCallbackArgType): void;
     }
 }
@@ -2871,6 +2926,8 @@ declare module "wunderbaum" {
         logTimeEnd(label: string): void;
         /** Write to `console.warn` with tree name as prefix with if opts.debugLevel >= 2. */
         logWarn(...args: any[]): void;
+        /** Reset column widths to default. */
+        resetColumns(): void;
         /**
          * Make sure that this node is vertically scrolled into the viewport.
          *

package/dist/wunderbaum.esm.js

@@ -288,7 +288,7 @@ function throttle(func, wait = 0, options = {}) {
 /*!
  * Wunderbaum - util
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+ * v0.10.0, Mon, 24 Jun 2024 19:17:59 GMT (https://github.com/mar10/wunderbaum)
  */
 /** @module util */
 /** Readable names for `MouseEvent.button` */
@@ -937,6 +937,52 @@ function toSet(val) {
     }
     throw new Error("Cannot convert to Set<string>: " + val);
 }
+/** Convert a pixel string to number.
+ * We accept a number or a string like '123px'. If undefined, the first default
+ * value that is a number or a string ending with 'px' is returned.
+ *
+ * Example:
+ * ```js
+ * const width = util.toPixel("123px", 100);
+ * ```
+ */
+function toPixel(
+// val: string | number | undefined | null,
+...defaults) {
+    // if (typeof val === "number") {
+    //   return val;
+    // }
+    for (const d of defaults) {
+        if (typeof d === "number") {
+            return d;
+        }
+        if (typeof d === "string" && d.endsWith("px")) {
+            return parseInt(d, 10);
+        }
+        assert(d == null, `Expected a number or string like '123px': ${d}`);
+    }
+    throw new Error(`Expected a string like '123px': ${defaults}`);
+}
+/** Evaluate a boolean value using default if undefined.
+ * Example:
+ * ```js
+ * const opts = { flag: true };
+ * const value = util.toBool(opts.flag, otherVar, false);
+ * ```
+ */
+function toBool(
+// val: boolean | undefined | null,
+...boolDefaults) {
+    // if (val != null) {
+    //   return !!val;
+    // }
+    for (const d of boolDefaults) {
+        if (d != null) {
+            return !!d;
+        }
+    }
+    throw new Error("No default boolean value provided");
+}
 // /** Check if a string is contained in an Array or Set. */
 // export function isAnyOf(s: string, items: Array<string>|Set<string>): boolean {
 //   return Array.prototype.includes.call(items, s)
@@ -1078,6 +1124,8 @@ var util = /*#__PURE__*/Object.freeze({
     setValueToElem: setValueToElem,
     sleep: sleep,
     throttle: throttle,
+    toBool: toBool,
+    toPixel: toPixel,
     toSet: toSet,
     toggleCheckbox: toggleCheckbox,
     type: type
@@ -1086,7 +1134,7 @@ var util = /*#__PURE__*/Object.freeze({
 /*!
  * Wunderbaum - types
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+ * v0.10.0, Mon, 24 Jun 2024 19:17:59 GMT (https://github.com/mar10/wunderbaum)
  */
 /**
  * Possible values for {@link WunderbaumNode.update()} and {@link Wunderbaum.update()}.
@@ -1150,7 +1198,7 @@ var NavModeEnum;
 /*!
  * Wunderbaum - wb_extension_base
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+ * v0.10.0, Mon, 24 Jun 2024 19:17:59 GMT (https://github.com/mar10/wunderbaum)
  */
 class WunderbaumExtension {
     constructor(tree, id, defaults) {
@@ -1209,7 +1257,7 @@ class WunderbaumExtension {
 /*!
  * Wunderbaum - ext-filter
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+ * v0.10.0, Mon, 24 Jun 2024 19:17:59 GMT (https://github.com/mar10/wunderbaum)
  */
 const START_MARKER = "\uFFF7";
 const END_MARKER = "\uFFF8";
@@ -1533,7 +1581,7 @@ function _markFuzzyMatchedChars(text, matches, escapeTitles = true) {
 /*!
  * Wunderbaum - ext-keynav
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+ * v0.10.0, Mon, 24 Jun 2024 19:17:59 GMT (https://github.com/mar10/wunderbaum)
  */
 const QUICKSEARCH_DELAY = 500;
 class KeynavExtension extends WunderbaumExtension {
@@ -1897,7 +1945,7 @@ class KeynavExtension extends WunderbaumExtension {
 /*!
  * Wunderbaum - ext-logger
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+ * v0.10.0, Mon, 24 Jun 2024 19:17:59 GMT (https://github.com/mar10/wunderbaum)
  */
 class LoggerExtension extends WunderbaumExtension {
     constructor(tree) {
@@ -1939,7 +1987,7 @@ class LoggerExtension extends WunderbaumExtension {
 /*!
  * Wunderbaum - common
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+ * v0.10.0, Mon, 24 Jun 2024 19:17:59 GMT (https://github.com/mar10/wunderbaum)
  */
 const DEFAULT_DEBUGLEVEL = 3; // Replaced by rollup script
 /**
@@ -1957,6 +2005,8 @@ const ICON_WIDTH = 20;
 const TITLE_SPAN_PAD_Y = 7;
 /** Render row markup for N nodes above and below the visible viewport. */
 const RENDER_MAX_PREFETCH = 5;
+/** Minimum column width if not set otherwise. */
+const DEFAULT_MIN_COL_WIDTH = 4;
 /** Regular expression to detect if a string describes an image URL (in contrast
  * to a class name). Strings are considered image urls if they contain '.' or '/'.
  */
@@ -2262,7 +2312,7 @@ function decompressSourceData(source) {
 /*!
  * Wunderbaum - ext-dnd
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+ * v0.10.0, Mon, 24 Jun 2024 19:17:59 GMT (https://github.com/mar10/wunderbaum)
  */
 const nodeMimeType = "application/x-wunderbaum-node";
 class DndExtension extends WunderbaumExtension {
@@ -2707,7 +2757,7 @@ class DndExtension extends WunderbaumExtension {
 /*!
  * Wunderbaum - drag_observer
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+ * v0.10.0, Mon, 24 Jun 2024 19:17:59 GMT (https://github.com/mar10/wunderbaum)
  */
 /**
  * Convert mouse- and touch events to 'dragstart', 'drag', and 'dragstop'.
@@ -2715,6 +2765,7 @@ class DndExtension extends WunderbaumExtension {
 class DragObserver {
     constructor(opts) {
         this.start = {
+            event: null,
             x: 0,
             y: 0,
             altKey: false,
@@ -2724,6 +2775,7 @@ class DragObserver {
         };
         this.dragElem = null;
         this.dragging = false;
+        this.customData = {};
         // TODO: touch events
         this.events = ["mousedown", "mouseup", "mousemove", "keydown"];
         if (!opts.root) {
@@ -2751,22 +2803,32 @@ class DragObserver {
     stopDrag(cb_event) {
         if (this.dragging && this.opts.dragstop && cb_event) {
             cb_event.type = "dragstop";
-            this.opts.dragstop(cb_event);
+            try {
+                this.opts.dragstop(cb_event);
+            }
+            catch (err) {
+                console.error("dragstop error", err); // eslint-disable-line no-console
+            }
         }
         this.dragElem = null;
         this.dragging = false;
+        this.start.event = null;
+        this.customData = {};
     }
     handleEvent(e) {
         const type = e.type;
         const opts = this.opts;
         const cb_event = {
             type: e.type,
+            startEvent: type === "mousedown" ? e : this.start.event,
             event: e,
+            customData: this.customData,
             dragElem: this.dragElem,
             dx: e.pageX - this.start.x,
             dy: e.pageY - this.start.y,
             apply: undefined,
         };
+        // console.log("handleEvent", type, cb_event);
         switch (type) {
             case "keydown":
                 this.stopDrag(cb_event);
@@ -2791,6 +2853,7 @@ class DragObserver {
                         }
                     }
                 }
+                this.start.event = e;
                 this.start.x = e.pageX;
                 this.start.y = e.pageY;
                 this.start.altKey = e.altKey;
@@ -2843,7 +2906,7 @@ class DragObserver {
 /*!
  * Wunderbaum - ext-grid
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+ * v0.10.0, Mon, 24 Jun 2024 19:17:59 GMT (https://github.com/mar10/wunderbaum)
  */
 class GridExtension extends WunderbaumExtension {
     constructor(tree) {
@@ -2852,11 +2915,43 @@ class GridExtension extends WunderbaumExtension {
         });
         this.observer = new DragObserver({
             root: window.document,
-            selector: "span.wb-col-resizer",
+            selector: "span.wb-col-resizer-active",
             thresh: 4,
             // throttle: 400,
             dragstart: (e) => {
-                return this.tree.element.contains(e.dragElem);
+                const info = Wunderbaum.getEventInfo(e.startEvent);
+                const colDef = info.colDef;
+                const allow = colDef &&
+                    this.tree.element.contains(e.dragElem) &&
+                    toBool(colDef.resizable, tree.options.resizableColumns, false);
+                // this.tree.log("dragstart", colDef, e, info);
+                this.tree.element.classList.toggle("wb-col-resizing", !!allow);
+                info.colElem.classList.toggle("wb-col-resizing", !!allow);
+                // We start dagging, so we remember the actual width in *pixels*
+                // (which may be 'auto' or '100%').
+                // Since we we re-create the markup on each update, we also cannot store
+                // the original event or DOM element, but only the colDef object.
+                if (allow) {
+                    // Store initial target column infos in customData
+                    e.customData.colDef = colDef;
+                    e.customData.orgCustomWidthPx = colDef.customWidthPx;
+                    const curWidthPx = Number.parseInt(info.colElem.style.width, 10);
+                    e.customData.orgWidthPx = curWidthPx;
+                    // Set custom width to current width, so that we can modify it
+                    colDef.customWidthPx = curWidthPx;
+                    // this.tree.log(
+                    //   `dragstart customWidthPx=${colDef.customWidthPx}`,
+                    //   e,
+                    //   info
+                    // );
+                    this.tree.update(ChangeType.colStructure);
+                    // this.tree.log(
+                    //   `dragstart 2 customWidthPx=${colDef.customWidthPx}`,
+                    //   e,
+                    //   info
+                    // );
+                }
+                return allow;
             },
             drag: (e) => {
                 // TODO: throttle
@@ -2870,17 +2965,39 @@ class GridExtension extends WunderbaumExtension {
     init() {
         super.init();
     }
+    /**
+     * Hanldes drag and sragstop events for column resizing.
+     */
     handleDrag(e) {
-        const info = Wunderbaum.getEventInfo(e.event);
-        // this.tree.options.
-        this.tree.log(`${e.type}(${e.dx})`, e, info);
+        const custom = e.customData;
+        const colDef = custom.colDef;
+        // this.tree.log(`${e.type} (dx=${e.dx})`, e, info);
+        if (e.type === "dragstop" || e.type === "drag") {
+            this.tree.element.classList.remove("wb-col-resizing");
+            // info.colElem!.classList.remove("wb-col-resizing");
+            if (e.apply || e.type === "drag") {
+                const minWidth = toPixel(colDef.minWidth, DEFAULT_MIN_COL_WIDTH);
+                const newWidth = Math.max(minWidth, custom.orgWidthPx + e.dx);
+                colDef.customWidthPx = newWidth;
+                // this.tree.log(
+                //   `${e.type} minWidth=${minWidth}, newWidth=${newWidth}`,
+                //   colDef
+                // );
+            }
+            else {
+                // Drag was cancelled
+                this.tree.log("Column resize cancelled", e);
+                colDef.customWidthPx = custom.orgCustomWidthPx; // Restore original width or undefined
+            }
+            this.tree.update(ChangeType.colStructure);
+        }
     }
 }
 
 /*!
  * Wunderbaum - deferred
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+ * v0.10.0, Mon, 24 Jun 2024 19:17:59 GMT (https://github.com/mar10/wunderbaum)
  */
 /**
  * Implement a ES6 Promise, that exposes a resolve() and reject() method.
@@ -2933,7 +3050,7 @@ class Deferred {
 /*!
  * Wunderbaum - wunderbaum_node
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+ * v0.10.0, Mon, 24 Jun 2024 19:17:59 GMT (https://github.com/mar10/wunderbaum)
  */
 /** WunderbaumNode properties that can be passed with source data.
  * (Any other source properties will be stored as `node.data.PROP`.)
@@ -5342,7 +5459,7 @@ WunderbaumNode.sequence = 0;
 /*!
  * Wunderbaum - ext-edit
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.9.0, Sun, 05 May 2024 16:08:56 GMT (https://github.com/mar10/wunderbaum)
+ * v0.10.0, Mon, 24 Jun 2024 19:17:59 GMT (https://github.com/mar10/wunderbaum)
  */
 // const START_MARKER = "\uFFF7";
 class EditExtension extends WunderbaumExtension {
@@ -5673,8 +5790,8 @@ class EditExtension extends WunderbaumExtension {
  * https://github.com/mar10/wunderbaum
  *
  * Released under the MIT license.
- * @version v0.9.0
- * @date Sun, 05 May 2024 16:08:56 GMT
+ * @version v0.10.0
+ * @date Mon, 24 Jun 2024 19:17:59 GMT
  */
 // import "./wunderbaum.scss";
 class WbSystemRoot extends WunderbaumNode {
@@ -6997,6 +7114,13 @@ class Wunderbaum {
             console.warn(this.toString(), ...args); // eslint-disable-line no-console
         }
     }
+    /** Reset column widths to default. */
+    resetColumns() {
+        this.columns.forEach((col) => {
+            delete col.customWidthPx;
+        });
+        this.update(ChangeType.colStructure);
+    }
     /**
      * Make sure that this node is vertically scrolled into the viewport.
      *
@@ -7354,7 +7478,7 @@ class Wunderbaum {
         this._columnsById = {};
         for (const col of columns) {
             this._columnsById[col.id] = col;
-            const cw = col.width;
+            const cw = col.customWidthPx ? `${col.customWidthPx}px` : col.width;
             if (col.id === "*" && col !== col0) {
                 throw new Error(`Column id '*' must be defined only once: '${col.title}'.`);
             }
@@ -7460,7 +7584,13 @@ class Wunderbaum {
             }
             let resizer = "";
             if (i < colCount - 1) {
-                resizer = '<span class="wb-col-resizer"></span>';
+                if (toBool(col.resizable, this.options.resizableColumns, false)) {
+                    resizer =
+                        '<span class="wb-col-resizer wb-col-resizer-active"></span>';
+                }
+                else {
+                    resizer = '<span class="wb-col-resizer"></span>';
+                }
             }
             colElem.innerHTML = `<span class="wb-col-title"${tooltip}>${title}</span>${resizer}`;
             if (this.isCellNav()) {
@@ -7910,7 +8040,7 @@ class Wunderbaum {
 }
 Wunderbaum.sequence = 0;
 /** Wunderbaum release version number "MAJOR.MINOR.PATCH". */
-Wunderbaum.version = "v0.9.0"; // Set to semver by 'grunt release'
+Wunderbaum.version = "v0.10.0"; // Set to semver by 'grunt release'
 /** Expose some useful methods of the util.ts module as `Wunderbaum.util`. */
 Wunderbaum.util = util;