flexdesk 0.16.1 → 0.17.1

package/src/ui/components/color_list_field.js

@@ -0,0 +1,210 @@
+/**
+ * ColorListField — an ordered list of colours: add, remove, and reorder by
+ * the grip (drag) or the up / down buttons, each row a `ColorField`.
+ *
+ *   const list = new ColorListField({
+ *       value: ['#1f77b4', 'rgb(255, 127, 14)'],
+ *       onChange: (colors, { commit }) => { ... },
+ *   });
+ *   host.appendChild(list.render());
+ *   list.getValue();             // ['#1f77b4', '#ff7f0e'] — or null, see below
+ *
+ * The list is a `SortableList` (the same add / remove / drag-reorder every
+ * list in the library uses) whose rows render a `ColorField` and a pair of
+ * move buttons, so the order can be changed without a pointer.
+ *
+ * `getValue()` is the colours in their current order as lowercase `#rrggbb`,
+ * or `null` while any row holds something that is not a hex colour —
+ * `invalidIndexes()` says which. Empty rows count as invalid: a list entry
+ * with no colour is not a colour.
+ *
+ * Given a `name`, the list also carries a hidden `<input name>` whose value is
+ * the rows as JSON, and fires `input` on it for every edit and `change` for
+ * every committed one (a row's `change`, add, remove, move). That is the
+ * surface a host form listens on; `openForm` reads the list through
+ * `getValue()`, not through that input.
+ */
+
+import { SortableList } from './sortable_list.js';
+import { ColorField, isHexColor, normalizeHex } from './color_field.js';
+
+let _seq = 0;
+
+/** A row's text as `#rrggbb`, or null when it is not a hex colour. */
+const hexOf = (text) => {
+    const t = String(text ?? '').trim();
+    return isHexColor(t) ? normalizeHex(t) : null;
+};
+
+export class ColorListField {
+    /**
+     * @param {Object}   [o]
+     * @param {string[]} [o.value]     initial colours (hex or rgb())
+     * @param {string[]} [o.presets]   preset colours offered on every row
+     * @param {string}   [o.newColor]  colour a newly added row starts on
+     * @param {string}   [o.addLabel]  text of the add button
+     * @param {string}   [o.name]      `name` of the hidden input, for a host form
+     * @param {Function} [o.onChange]  `(colors, { commit })`, colors as `getValue()`
+     */
+    constructor({
+        value = [], presets = [], newColor = '#000000', addLabel = 'Add colour',
+        name = null, onChange = null,
+    } = {}) {
+        this.presets = Array.isArray(presets) ? presets : [];
+        // Converted once, as #toItems does, so an added row is what it shows.
+        this.newColor = normalizeHex(String(newColor ?? '')) ?? String(newColor ?? '');
+        this.addLabel = addLabel;
+        this.name = name;
+        this.onChange = typeof onChange === 'function' ? onChange : null;
+
+        /** Row index -> its ColorField; always exactly the rendered rows. */
+        this._fields = [];
+        /** Whether the SortableList change being reported is a committed one. */
+        this._commit = true;
+        /** True while a row's own edit is written into the list's items. */
+        this._rowEdit = false;
+        this.list = new SortableList({
+            items: this.#toItems(value),
+            addButtonText: addLabel,
+            emptyMessage: 'No colours',
+            createItem: () => ({ id: ++_seq, text: this.newColor }),
+            renderItem: (container, item, index, callbacks) =>
+                this.#renderRow(container, item, index, callbacks),
+            // Every SortableList change but a row's own edit (add, remove,
+            // move, drag) is followed by a refresh that rebuilds all rows —
+            // down to none — so the old fields go first.
+            onChange: () => {
+                if (!this._rowEdit) this.#dropFields();
+                this.#emit(this._commit);
+            },
+        });
+        this.root = null;
+        this.input = null;
+    }
+
+    render() {
+        if (this.root) return this.root;
+        const root = document.createElement('div');
+        root.className = 'twm-color-list';
+        if (this.name) {
+            const input = document.createElement('input');
+            input.type = 'hidden';
+            input.name = this.name;
+            root.appendChild(input);
+            this.input = input;
+        }
+        root.appendChild(this.list.render());
+        this.root = root;
+        this.#writeInput();
+        return root;
+    }
+
+    /** The colours in order as `#rrggbb`, or null while any row is not one. */
+    getValue() {
+        const out = this.getTexts().map(hexOf);
+        return out.includes(null) ? null : out;
+    }
+
+    /** The rows' text as it stands, valid or not. */
+    getTexts() {
+        return this.list.getItems().map((item) => String(item.text ?? ''));
+    }
+
+    /** Indexes of the rows that do not hold a hex colour. */
+    invalidIndexes() {
+        const bad = [];
+        this.getTexts().forEach((text, i) => { if (!hexOf(text)) bad.push(i); });
+        return bad;
+    }
+
+    /** Replace the colours without firing `onChange`. */
+    setValue(colors) {
+        this.#dropFields();
+        this.list.setItems(this.#toItems(colors));
+        this.#writeInput();
+    }
+
+    /** Focus the first invalid row, else the first row, else the add button. */
+    focus() {
+        const bad = this.invalidIndexes()[0];
+        const field = this._fields[bad ?? 0];
+        if (field) { field.focus(); return; }
+        this.root?.querySelector('.twm-sortable-list__add')?.focus();
+    }
+
+    dispose() {
+        this.#dropFields();
+        this.list.dispose();
+        this.root = null;
+        this.input = null;
+    }
+
+    #toItems(colors) {
+        // A colour that converts is kept as its hex; anything else is kept as
+        // typed, so it shows — and is reported — rather than vanishing.
+        return (Array.isArray(colors) ? colors : []).map((c) => ({
+            id: ++_seq,
+            text: normalizeHex(String(c ?? '')) ?? String(c ?? ''),
+        }));
+    }
+
+    /** Dispose every row's field: the rows are about to be rebuilt. */
+    #dropFields() {
+        for (const f of this._fields) f?.dispose();
+        this._fields = [];
+    }
+
+    #renderRow(container, item, index, callbacks) {
+        const count = this.list.getItems().length;
+
+        const row = document.createElement('div');
+        row.className = 'twm-color-list__row';
+        const field = new ColorField({
+            value: item.text,
+            presets: this.presets,
+            label: `Colour ${index + 1}`,
+            // Every edit goes into the list's items, so the list never holds
+            // a stale row; `_commit` tells its onChange which kind it was.
+            onChange: (_v, { commit }) => {
+                this._commit = commit;
+                this._rowEdit = true;
+                try { callbacks.update({ text: field.getText() }); }
+                finally { this._commit = true; this._rowEdit = false; }
+            },
+        });
+        this._fields[index] = field;
+        row.appendChild(field.render());
+
+        const move = (icon, label, disabled, fn) => {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'twm-color-list__move';
+            btn.title = label;
+            btn.setAttribute('aria-label', label);
+            btn.disabled = disabled;
+            const glyph = document.createElement('span');
+            glyph.className = 'material-symbols-outlined';
+            glyph.setAttribute('aria-hidden', 'true');
+            glyph.textContent = icon;
+            btn.appendChild(glyph);
+            btn.addEventListener('click', fn);
+            row.appendChild(btn);
+        };
+        move('arrow_upward', 'Move up', index === 0, callbacks.moveUp);
+        move('arrow_downward', 'Move down', index === count - 1, callbacks.moveDown);
+        container.appendChild(row);
+    }
+
+    #writeInput() {
+        if (this.input) this.input.value = JSON.stringify(this.getTexts());
+    }
+
+    #emit(commit) {
+        this.#writeInput();
+        if (this.input) {
+            this.input.dispatchEvent(new Event('input', { bubbles: true }));
+            if (commit) this.input.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+        this.onChange?.(this.getValue(), { commit });
+    }
+}

package/src/ui/components/column_groups.js

@@ -0,0 +1,314 @@
+/**
+ * column_groups.js — STORY-0066. DataTable's COLUMN GROUPS (`columnGroups`).
+ * INTERNAL to the table: imported by `data_table.js` (and its span helpers by
+ * `crosstab.js`) only, and not part of the widgets barrel — it reads the
+ * table's private fields.
+ *
+ * A group is `{key, label?, columns: number[]}` (data column indices). The
+ * groups draw a second header row above the column headers, one cell a run of
+ * shown columns of the same group spanning them, a blank cell over the row
+ * number / select column and over any run of columns in no group.
+ *
+ * ── WHY A TABLE OF ITS OWN ────────────────────────────────────────────────
+ *
+ * The group row is a separate `<table class="twm-dt-groups">` in the header
+ * wrap, above the header table, rather than a first row of the header's
+ * `<thead>`. Every width pass of the table (`_measureNaturalWidths`,
+ * `_syncHeaderWidths`, the resize drag, `_applyTableWidth`) reads and writes
+ * the header rows CELL BY CELL at the column's index, and under
+ * `table-layout: fixed` the first row decides the track — a row of spanning
+ * cells in either place would misalign every column. So the group table has a
+ * `<colgroup>` of its own, one `<col>` a drawn column, and `align()` copies the
+ * header's widths, table width, layout and sideways scroll onto it after every
+ * pass that changes them (DataTable `_syncHeaderScroll`). The header wrap
+ * scrolls both tables together.
+ *
+ * ── AN EMPTY GROUP KEEPS A PLACEHOLDER COLUMN ─────────────────────────────
+ *
+ * A group with no columns would have no cell to draw, so it gets one drawn
+ * column of its own: a header cell `th.twm-dt-col--placeholder` (holding the
+ * group's add control under `onColumnAdd`), an empty filter cell, and an
+ * empty `td.twm-dt-cell--placeholder` in every body row. It is NO DATA
+ * column: `_dataIdxOfDom` answers null for it, it is not in a copy, the CSV,
+ * `ctx.colIdx` or the cell mode. It stands after the shown columns of the
+ * groups listed before it.
+ *
+ * A table without `columnGroups` never builds this.
+ */
+
+import { callOption, headerActionButton } from './header_actions.js';
+
+/**
+ * A row of spanning cells, cleaned (shared with STORY-0091's crosstab header
+ * rows): the data columns that exist, each column in the first cell that lists
+ * it, `key`, a label, and `index`, the cell's place in `spec` (the consumer's
+ * object is looked up there when drawing, never kept). Under `requireKey` a
+ * cell without a key is dropped; a cell without a label is labelled
+ * `defaultLabel(cell)`.
+ */
+export function normalizeSpans(spec, n, { requireKey = false, defaultLabel = () => '' } = {}) {
+    const taken = new Set();
+    const out = [];
+    (Array.isArray(spec) ? spec : []).forEach((g, index) => {
+        if (!g || (requireKey && g.key == null)) return;
+        const columns = [];
+        for (const c of Array.isArray(g.columns) ? g.columns : []) {
+            const i = Number(c);
+            if (!Number.isInteger(i) || i < 0 || i >= n || taken.has(i)) continue;
+            taken.add(i);
+            columns.push(i);
+        }
+        out.push({ key: g.key, label: g.label == null ? defaultLabel(g) : String(g.label), columns, index });
+    });
+    return out;
+}
+
+/** The groups the table was given, cleaned: a key each, the key as the label
+ *  when none is given. */
+function normalize(spec, n) {
+    return normalizeSpans(spec, n, { requireKey: true, defaultLabel: (g) => String(g.key) });
+}
+
+/** A spanning header cell over a run of columns in no group (or no cell). */
+export function blankSpanCell(span) {
+    const th = document.createElement('th');
+    th.className = 'twm-dt-group twm-dt-group--none';
+    th.colSpan = span;
+    return th;
+}
+
+/** A spanning header cell holding a label, its tooltip `title`. */
+export function labelSpanCell(span, label, title = label) {
+    const th = document.createElement('th');
+    th.className = 'twm-dt-group';
+    th.colSpan = span;
+    th.title = title;
+    const el = document.createElement('span');
+    el.className = 'twm-dt-group__label';
+    el.textContent = label;
+    th.appendChild(el);
+    return th;
+}
+
+export class ColumnGroups {
+    /** @param {import('./data_table.js').DataTable} table */
+    constructor(table) {
+        this.table = table;
+        this._memoKey = null;
+        this._memo = null;
+        this._el = null;
+    }
+
+    _cfg() {
+        return this.table.config;
+    }
+
+    /**
+     * The drawn columns after the lead, in order: `{col, group}` for a shown
+     * data column (`group` the index in `groups`, or null) and
+     * `{placeholder: true, group}` for an empty group's column. The data
+     * columns come in the order the table draws them (STORY-0086's
+     * `columnOrder`, hidden ones left out). Memoised on the groups' content,
+     * the column count and the drawn columns.
+     */
+    layout() {
+        const cfg = this._cfg();
+        const n = cfg.headers?.length || 0;
+        const shown = this.table._shownColumns();
+        const spec = Array.isArray(cfg.columnGroups) ? cfg.columnGroups : [];
+        const key = `${n}|${shown.join(',')}|${spec.map((g) => (g ? `${g.key}\x01${g.label}\x01${(g.columns || []).join(',')}` : '')).join('\x02')}`;
+        if (key === this._memoKey) return this._memo;
+
+        const groups = normalize(spec, n);
+        const groupOf = new Array(n).fill(null);
+        groups.forEach((g, gi) => { for (const c of g.columns) groupOf[c] = gi; });
+        const empty = groups.map((g) => g.columns.length === 0);
+        const placed = new Set();
+        const slots = [];
+        const placeEmptyBefore = (gi) => {
+            for (let e = 0; e < gi; e++) {
+                if (empty[e] && !placed.has(e)) { placed.add(e); slots.push({ placeholder: true, group: e }); }
+            }
+        };
+        for (const c of shown) {
+            const gi = groupOf[c];
+            if (gi !== null) placeEmptyBefore(gi);
+            slots.push({ col: c, group: gi });
+        }
+        placeEmptyBefore(groups.length);
+
+        const slotOfCol = new Map();
+        slots.forEach((s, i) => { if (!s.placeholder) slotOfCol.set(s.col, i); });
+        const placeholders = slots.filter((s) => s.placeholder).length;
+        this._memoKey = key;
+        this._memo = { groups, slots, slotOfCol, placeholders };
+        return this._memo;
+    }
+
+    /** How many placeholder columns are drawn. */
+    placeholderCount() {
+        return this.layout().placeholders;
+    }
+
+    /** A shown data column's place after the lead, or -1 when the layout
+     *  has no placeholder (the table's own arithmetic then holds). */
+    slotOf(colIdx) {
+        const l = this.layout();
+        if (!l.placeholders) return -1;
+        return l.slotOfCol.has(colIdx) ? l.slotOfCol.get(colIdx) : -1;
+    }
+
+    /** What the drawn column `i` after the lead is: the data column, null for
+     *  a placeholder or past the end, `undefined` when the layout has no
+     *  placeholder (the table's own arithmetic then holds). */
+    slotAt(i) {
+        const l = this.layout();
+        if (!l.placeholders) return undefined;
+        const s = l.slots[i];
+        return s && !s.placeholder ? s.col : null;
+    }
+
+    /** Part of the table's column signature: where the placeholders stand. */
+    sig() {
+        const l = this.layout();
+        if (!l.placeholders) return '';
+        return `|g${l.slots.map((s, i) => (s.placeholder ? i : '')).filter((x) => x !== '').join(',')}`;
+    }
+
+    /** The drawn positions (after the lead) of the placeholders, ascending,
+     *  with their groups. */
+    _placeholderSlots() {
+        const out = [];
+        this.layout().slots.forEach((s, i) => { if (s.placeholder) out.push({ at: i, group: s.group }); });
+        return out;
+    }
+
+    /** Put the placeholders' cells into a drawn row whose cells are the lead
+     *  and the shown data columns, in order. */
+    _insert(tr, make) {
+        const lead = this.table._lead().all;
+        for (const { at, group } of this._placeholderSlots()) {
+            const ref = tr.children[lead + at] || null;
+            tr.insertBefore(make(this.layout().groups[group]), ref);
+        }
+    }
+
+    /** STORY-0066. A body row gets an empty cell under each placeholder. */
+    fillRow(tr) {
+        if (!this.placeholderCount()) return;
+        this._insert(tr, () => {
+            const td = document.createElement('td');
+            td.className = 'twm-dt-cell--placeholder';
+            return td;
+        });
+    }
+
+    /**
+     * After the header is built and in the header table: the placeholders'
+     * header and filter cells, and the group table above the header table.
+     */
+    decorate(headerWrap, headerTable) {
+        this._el = null;
+        if (!headerWrap || !headerTable) return;
+        const thead = headerTable.querySelector('thead');
+        const labelRow = thead?.querySelector('tr');
+        if (!labelRow) return;
+        if (this.placeholderCount()) {
+            this._insert(labelRow, (g) => this._placeholderHead(g));
+            for (const tr of thead.querySelectorAll('tr.twm-data-table__filter-row')) {
+                this._insert(tr, () => {
+                    const th = document.createElement('th');
+                    th.className = 'data-table__filter-cell data-table__filter-cell--empty twm-dt-col--placeholder';
+                    return th;
+                });
+            }
+        }
+        const groupTable = this._buildGroupTable(headerTable);
+        headerWrap.insertBefore(groupTable, headerTable);
+        this._el = groupTable;
+        this.align();
+    }
+
+    _placeholderHead(group) {
+        const th = document.createElement('th');
+        th.className = 'text twm-dt-col--placeholder';
+        if (typeof this._cfg().onColumnAdd === 'function') {
+            th.appendChild(this._addButton(group));
+        }
+        return th;
+    }
+
+    _addButton(group) {
+        return headerActionButton('twm-dt-group__add', { icon: 'add', title: `Add column to ${group.label}` },
+                                  () => callOption(this._cfg(), 'onColumnAdd', group.key));
+    }
+
+    _buildGroupTable(headerTable) {
+        const { groups, slots } = this.layout();
+        const lead = this.table._lead().all;
+        const table = document.createElement('table');
+        table.className = `${headerTable.className} twm-dt-groups`;
+        const colgroup = document.createElement('colgroup');
+        for (let i = 0; i < lead + slots.length; i++) colgroup.appendChild(document.createElement('col'));
+        table.appendChild(colgroup);
+        const thead = document.createElement('thead');
+        const tr = document.createElement('tr');
+        tr.className = 'twm-dt-group-row';
+        if (lead) {
+            const th = document.createElement('th');
+            th.className = 'twm-dt-group twm-dt-group--lead';
+            th.colSpan = lead;
+            tr.appendChild(th);
+        }
+        // Runs of the same group (or of no group) are one cell.
+        let i = 0;
+        while (i < slots.length) {
+            const gi = slots[i].group;
+            let j = i + 1;
+            while (j < slots.length && slots[j].group === gi) j++;
+            tr.appendChild(gi === null ? blankSpanCell(j - i) : this._groupCell(groups[gi], j - i, slots[i].placeholder));
+            i = j;
+        }
+        thead.appendChild(tr);
+        table.appendChild(thead);
+        return table;
+    }
+
+    _groupCell(group, span, empty) {
+        const th = labelSpanCell(span, group.label);
+        if (empty) th.classList.add('twm-dt-group--empty');
+
+        const actions = document.createElement('span');
+        actions.className = 'twm-dt-group__actions';
+        const cfg = this._cfg();
+        // The consumer's group object from the live config: the layout is
+        // memoised on key, label and columns, so a group whose other fields
+        // changed is still asked about with its current object.
+        const items = callOption(cfg, 'groupActions', cfg.columnGroups[group.index], { key: group.key, columns: group.columns.slice(), table: this.table });
+        for (const item of Array.isArray(items) ? items.filter(Boolean) : []) {
+            actions.appendChild(headerActionButton('twm-dt-group__action', item,
+                                                   () => callOption(cfg, 'onGroupAction', item.action, group.key)));
+        }
+        if (typeof cfg.onColumnAdd === 'function') actions.appendChild(this._addButton(group));
+        if (actions.childNodes.length) th.appendChild(actions);
+        return th;
+    }
+
+    /** The group table follows the header table: the same column widths,
+     *  table width, layout and sideways offset. */
+    align() {
+        const groupTable = this._el;
+        const headerTable = this.table._headerTableEl;
+        if (!groupTable || !headerTable) return;
+        const labelRow = headerTable.querySelector('thead > tr');
+        const cols = groupTable.querySelector('colgroup')?.children || [];
+        for (let i = 0; i < cols.length; i++) {
+            const th = labelRow?.children[i];
+            const w = th ? parseFloat(th.style.width) : NaN;
+            cols[i].style.width = Number.isFinite(w) ? `${w}px` : '';
+        }
+        groupTable.style.width = headerTable.style.width;
+        groupTable.style.tableLayout = headerTable.style.tableLayout;
+        groupTable.style.transform = headerTable.style.transform;
+    }
+}

package/src/ui/components/column_order.js

@@ -0,0 +1,142 @@
+/**
+ * column_order.js — STORY-0086. The order DataTable draws its data columns in
+ * (`reorderable`, `columnOrder`, `moveColumn`, `getColumnOrder`), and the drag
+ * on the header that changes it. Internal to the table, like `cell_grid.js`.
+ *
+ * ══ AN ORDER IS A LIST OF DATA INDICES ══════════════════════════════════
+ *
+ * The order is every data column's index (hidden ones included), in the order
+ * shown: `[0, 3, 1, 2]` draws column 3 second. Everything else the table keeps
+ * by column — `hiddenColumns`, the sort, the filters, `renderCell`'s `colIdx`,
+ * the cell mode's `col` — stays a data index and so stays on its column. Only
+ * what is BY DRAWN POSITION (the cells of a row, the widths) follows the order.
+ *
+ * A table with no order asked for (`null`) draws 0, 1, 2, … as in 0.16. An
+ * order that is not a permutation of today's columns — a saved one from when
+ * the table had a different number of columns — is no order: the natural one
+ * is drawn.
+ */
+
+/** Whether `order` is a permutation of `0..n-1`. */
+export function isColumnOrder(order, n) {
+    if (!Array.isArray(order) || order.length !== n) return false;
+    const seen = new Set();
+    for (const c of order) {
+        if (!Number.isInteger(c) || c < 0 || c >= n || seen.has(c)) return false;
+        seen.add(c);
+    }
+    return true;
+}
+
+/** `0..n-1`. */
+export function naturalOrder(n) {
+    return Array.from({ length: Math.max(0, n) }, (_, i) => i);
+}
+
+/**
+ * The data indices of a row of `count` cells in the order drawn: `order`
+ * where it holds, and any cell past the headers (a row longer than them) after
+ * it, as 0.16 drew them.
+ */
+export function cellOrder(order, count) {
+    if (!order) return naturalOrder(count);
+    const out = order.filter((c) => c < count);
+    for (let c = order.length; c < count; c++) out.push(c);
+    return out;
+}
+
+/** `order` with the column at position `from` taken out and put back at
+ *  position `to` (positions in `order`). A copy; `order` is not changed. */
+export function moveInOrder(order, from, to) {
+    const next = order.slice();
+    const [moved] = next.splice(from, 1);
+    next.splice(to, 0, moved);
+    return next;
+}
+
+/**
+ * The header drag. Every data column's header cell is draggable; dropping one
+ * on another data column's header moves it to that column's place. A press
+ * that starts on a resize grip is the resize's, never a drag. The row-number
+ * and select columns are no data columns: they do not drag and take no drop,
+ * so nothing lands in front of them.
+ */
+export class ColumnReorder {
+    /** @param {import('./data_table.js').DataTable} table */
+    constructor(table) {
+        this.table = table;
+        /** The data column being dragged, or null. */
+        this.dragging = null;
+        /** Whether the last press on a header cell was on its resize grip. */
+        this.onGrip = false;
+    }
+
+    /** Wire the header row of a fresh render. Its cells are new each render,
+     *  so nothing needs taking off. */
+    install(headRow) {
+        if (!headRow) return;
+        [...headRow.children].forEach((th, domIdx) => {
+            const col = this.table._dataIdxOfDom(domIdx);
+            if (col === null) return;
+            th.draggable = true;
+            th.classList.add('twm-dt-col--movable');
+            // Capture: the grip stops its own mousedown, so a listener on the
+            // way up would never hear it.
+            th.addEventListener('mousedown', (ev) => {
+                this.onGrip = !!ev.target?.closest?.('.twm-dt-col-resizer');
+            }, true);
+            th.addEventListener('dragstart', (ev) => {
+                if (this.onGrip || ev.target?.closest?.('.twm-dt-col-resizer')) {
+                    ev.preventDefault();
+                    return;
+                }
+                this.dragging = col;
+                try {
+                    ev.dataTransfer?.setData('text/plain', String(col));
+                    if (ev.dataTransfer) ev.dataTransfer.effectAllowed = 'move';
+                } catch (_) { /* a drag with no data transfer */ }
+                th.classList.add('twm-dt-col--dragging');
+            });
+            th.addEventListener('dragover', (ev) => {
+                if (this.dragging === null || this.dragging === col) return;
+                ev.preventDefault();               // a drop is welcome here
+                if (ev.dataTransfer) ev.dataTransfer.dropEffect = 'move';
+                // Moved right it lands AFTER the column it is dropped on.
+                const order = this.table.getColumnOrder();
+                th.classList.add('twm-dt-col--drop');
+                th.classList.toggle('twm-dt-col--drop-after', order.indexOf(col) > order.indexOf(this.dragging));
+            });
+            th.addEventListener('dragleave', () => th.classList.remove('twm-dt-col--drop', 'twm-dt-col--drop-after'));
+            th.addEventListener('drop', (ev) => {
+                th.classList.remove('twm-dt-col--drop', 'twm-dt-col--drop-after');
+                const from = this.dragging;
+                this.dragging = null;
+                if (from === null || from === col) return;
+                ev.preventDefault();
+                const order = this.table.getColumnOrder();
+                this.table.moveColumn(order.indexOf(from), order.indexOf(col));
+            });
+            th.addEventListener('dragend', () => {
+                th.classList.remove('twm-dt-col--dragging');
+                this.dragging = null;
+            });
+        });
+    }
+
+    /** "Move left" / "Move right" for the header menu of data column `col`:
+     *  past the shown column next to it. */
+    menuItems(col) {
+        const shown = this.table._shownColumns();
+        const at = shown.indexOf(col);
+        if (at < 0) return [];
+        const order = this.table.getColumnOrder();
+        const step = (to) => () => this.table.moveColumn(order.indexOf(col), order.indexOf(to));
+        return [
+            { label: 'Move left', icon: 'arrow_back', action: 'move-left', disabled: at === 0,
+              onChoose: at === 0 ? undefined : step(shown[at - 1]) },
+            { label: 'Move right', icon: 'arrow_forward', action: 'move-right',
+              disabled: at === shown.length - 1,
+              onChoose: at === shown.length - 1 ? undefined : step(shown[at + 1]) },
+        ];
+    }
+}