@fluixi-ui/bulk-editor 0.2.1

package/dist/bulk-editor.js

@@ -0,0 +1,1202 @@
+import { createNativeElement, spread, insert, createComponent, delegateEvents } from "@fluixi/dom";
+import { For } from "@fluixi/core";
+import { createSignal, createMemo, createEffect, onCleanup, untrack } from "@fluixi/reactive/signal";
+import { createBulkEditorState } from "./state.js";
+delegateEvents(["click", "change", "input", "blur", "focus", "keydown", "mousedown", "dblclick"]);
+const DEFAULT_COL_W = 130;
+const toggleAttr = (el, name, on) => on ? el.setAttribute(name, "") : el.removeAttribute(name);
+const Padlock = () => (() => {
+  const _el$ = createNativeElement("svg", true);
+  spread({
+    element: _el$,
+    props: {
+      viewBox: "0 0 24 24",
+      width: "12",
+      height: "12",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "aria-hidden": "true"
+    },
+    isSVG: true
+  });
+  insert(_el$, (() => {
+    const _el$2 = createNativeElement("rect", true);
+    spread({
+      element: _el$2,
+      props: {
+        x: "5",
+        y: "11",
+        width: "14",
+        height: "10",
+        rx: "2"
+      },
+      isSVG: true
+    });
+    return _el$2;
+  })());
+  insert(_el$, (() => {
+    const _el$2 = createNativeElement("path", true);
+    spread({
+      element: _el$2,
+      props: {
+        d: "M8 11V7a4 4 0 0 1 8 0v4"
+      },
+      isSVG: true
+    });
+    return _el$2;
+  })());
+  return _el$;
+})();
+const HINTS = [["↑↓←→", "navigate"], ["⇧+↑↓←→", "extend"], ["Click header", "column"], ["Ctrl+A", "all"], ["Enter/F2", "edit"], ["Del", "clear"], ["Ctrl+D", "fill down"], ["Ctrl+C/V", "copy/paste"]];
+function BulkEditor(props) {
+  const state = createBulkEditorState(props);
+  const labelWidth = props.labelWidth ?? 200;
+  let containerEl;
+  const [scrollEl, setScrollEl] = createSignal(void 0);
+  const [focused, setFocused] = createSignal(false);
+  const colWidth = (col) => state.columnWidths().get(col.key) ?? col.width ?? DEFAULT_COL_W;
+  const colBox = (col) => `min-width:${colWidth(col)}px;width:${colWidth(col)}px`;
+  const align = (col) => col.align ?? "right";
+  const showFooter = () => props.footer ?? state.columns().some((c) => !!c.aggregate);
+  const [dragCol, setDragCol] = createSignal(null);
+  const [dropCol, setDropCol] = createSignal(null);
+  const endReorder = () => {
+    setDragCol(null);
+    setDropCol(null);
+  };
+  const startResize = (e, col) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const startX = e.clientX;
+    const startW = colWidth(col);
+    trackDrag((ev) => state.setColumnWidth(col.key, startW + (ev.clientX - startX)));
+  };
+  const hasActions = createMemo(() => props.rows().some((r) => !r.isGroup && r.rowActions != null));
+  const dataIndex = createMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    state.dataRows().forEach((r, i) => m.set(r.id, i));
+    return m;
+  });
+  createEffect(() => {
+    const scroll = scrollEl();
+    if (!scroll) return;
+    const rng = state.selectionRange();
+    const ed = state.editing();
+    state.errors();
+    state.lockedCells();
+    state.rowCount();
+    state.colCount();
+    scroll.querySelectorAll("[data-cell]").forEach((el) => {
+      const [r, c] = el.dataset.cell.split(":").map(Number);
+      const inRng = rng ? r >= rng.r1 && r <= rng.r2 && c >= rng.c1 && c <= rng.c2 : false;
+      const isAnchor = state.isAnchor(r, c);
+      const isEdit = ed ? ed.row === r && ed.col === c : false;
+      toggleAttr(el, "data-selected", inRng && !isEdit);
+      toggleAttr(el, "data-anchor", isAnchor && !isEdit);
+      toggleAttr(el, "data-editing", isEdit);
+      toggleAttr(el, "data-locked", state.isCellLockedAt(r, c));
+      if (inRng) el.setAttribute("aria-selected", "true");
+      else el.removeAttribute("aria-selected");
+      const err = state.getErrorAt(r, c);
+      toggleAttr(el, "data-invalid", !!err);
+      if (err) {
+        el.setAttribute("title", err);
+        el.setAttribute("aria-invalid", "true");
+      } else {
+        el.removeAttribute("title");
+        el.removeAttribute("aria-invalid");
+      }
+    });
+    scroll.querySelectorAll("[data-col-head]").forEach((el) => {
+      const c = Number(el.dataset.colHead);
+      const full = !!rng && rng.c1 <= c && c <= rng.c2 && rng.r1 === 0 && rng.r2 === state.rowCount() - 1;
+      toggleAttr(el, "data-selected", full);
+    });
+    scroll.querySelectorAll("[data-row-lbl]").forEach((el) => {
+      const r = Number(el.dataset.rowLbl);
+      const full = !!rng && rng.r1 <= r && r <= rng.r2 && rng.c1 === 0 && rng.c2 === state.colCount() - 1;
+      toggleAttr(el, "data-selected", full);
+      const row = state.rowAt(r);
+      if (row) el.setAttribute("data-lock-state", state.getRowLockState(row.id));
+    });
+  });
+  const focusEditor = (r, c, selectAll) => requestAnimationFrame(() => {
+    const inp = scrollEl()?.querySelector(`[data-cell="${r}:${c}"] input`);
+    if (!inp) return;
+    inp.focus();
+    if (inp.type !== "number") {
+      if (selectAll) inp.select();
+      else inp.setSelectionRange(inp.value.length, inp.value.length);
+    }
+  });
+  const beginEdit = (r, c, initChar) => {
+    if (state.startEdit(r, c, initChar)) focusEditor(r, c, initChar === void 0);
+  };
+  const tabMove = (back) => {
+    const s = untrack(state.selection);
+    if (!s) return;
+    const {
+      row: r,
+      col: c
+    } = s.anchor;
+    const nc = state.colCount();
+    if (back) state.selectCell(c > 0 ? r : r - 1, c > 0 ? c - 1 : nc - 1);
+    else state.selectCell(c < nc - 1 ? r : r + 1, c < nc - 1 ? c + 1 : 0);
+  };
+  const copy = () => navigator.clipboard?.writeText(state.getSelectionTSV()).catch(() => {
+  });
+  const paste = async () => {
+    const text = await navigator.clipboard?.readText().catch(() => "");
+    if (text) state.pasteTSV(text);
+  };
+  const onKeyDown = (e) => {
+    const ed = state.editing();
+    const target = e.target;
+    const inField = target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement;
+    if (inField && !ed) return;
+    const s = state.selection();
+    if (!s && !ed) return;
+    if (ed) {
+      switch (e.key) {
+        case "Enter":
+          e.preventDefault();
+          state.commitEdit();
+          state.move(1, 0);
+          containerEl?.focus();
+          break;
+        case "Tab":
+          e.preventDefault();
+          state.commitEdit();
+          tabMove(e.shiftKey);
+          containerEl?.focus();
+          break;
+        case "Escape":
+          e.preventDefault();
+          state.cancelEdit();
+          containerEl?.focus();
+          break;
+      }
+      return;
+    }
+    const {
+      row: r,
+      col: c
+    } = s.anchor;
+    switch (e.key) {
+      case "ArrowUp":
+        e.preventDefault();
+        state.move(-1, 0, e.shiftKey);
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        state.move(1, 0, e.shiftKey);
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        state.move(0, -1, e.shiftKey);
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        state.move(0, 1, e.shiftKey);
+        break;
+      case "Home":
+        e.preventDefault();
+        state.selectCell(r, 0, e.shiftKey);
+        break;
+      case "End":
+        e.preventDefault();
+        state.selectCell(r, state.colCount() - 1, e.shiftKey);
+        break;
+      case "Tab":
+        e.preventDefault();
+        tabMove(e.shiftKey);
+        break;
+      case "Enter":
+      case "F2":
+        e.preventDefault();
+        beginEdit(r, c);
+        break;
+      case "Delete":
+      case "Backspace":
+        e.preventDefault();
+        state.clearRange();
+        break;
+      case "Escape":
+        e.preventDefault();
+        state.clearSelection();
+        break;
+      case " ":
+        e.preventDefault();
+        if (state.colAt(c)?.type === "checkbox") state.toggleCheckbox(r, c);
+        else beginEdit(r, c);
+        break;
+      default:
+        if (e.ctrlKey || e.metaKey) {
+          const k = e.key.toLowerCase();
+          if (k === "a") {
+            e.preventDefault();
+            state.selectAll();
+          } else if (k === "d") {
+            e.preventDefault();
+            state.fillDown();
+          } else if (k === "c") {
+            e.preventDefault();
+            copy();
+          } else if (k === "v") {
+            e.preventDefault();
+            paste();
+          } else if (k === "z") {
+            e.preventDefault();
+            e.shiftKey ? state.redo() : state.undo();
+          } else if (k === "y") {
+            e.preventDefault();
+            state.redo();
+          }
+        } else if (!e.altKey && e.key.length === 1) {
+          e.preventDefault();
+          beginEdit(r, c, e.key);
+        }
+    }
+  };
+  const cellFromPoint = (x, y) => {
+    const el = document.elementFromPoint(x, y)?.closest("[data-cell]");
+    if (!el?.dataset.cell) return null;
+    const [r, c] = el.dataset.cell.split(":").map(Number);
+    return {
+      r,
+      c
+    };
+  };
+  const trackDrag = (onMove, onEnd) => {
+    const move = (ev) => onMove(ev);
+    const up = () => {
+      document.removeEventListener("mousemove", move);
+      document.removeEventListener("mouseup", up);
+      onEnd?.();
+    };
+    document.addEventListener("mousemove", move);
+    document.addEventListener("mouseup", up);
+  };
+  const onCellMouseDown = (e, r, c) => {
+    const col = state.colAt(c);
+    if (col?.type === "checkbox") return;
+    if (e.target.tagName === "INPUT") return;
+    e.preventDefault();
+    containerEl?.focus();
+    if (e.shiftKey && untrack(state.selection)) {
+      state.selectCell(r, c, true);
+      return;
+    }
+    state.selectCell(r, c);
+    trackDrag((ev) => {
+      const pos = cellFromPoint(ev.clientX, ev.clientY);
+      if (pos) state.selectCell(pos.r, pos.c, true);
+    });
+  };
+  const onFillHandleDown = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    trackDrag((ev) => {
+      const pos = cellFromPoint(ev.clientX, ev.clientY);
+      if (pos) state.selectCell(pos.r, pos.c, true);
+    }, () => state.fillDown());
+  };
+  const [menu, setMenu] = createSignal(null);
+  const closeMenu = () => setMenu(null);
+  const openMenu = (e, r, c) => {
+    if (props.contextMenu === false) return;
+    e.preventDefault();
+    containerEl?.focus();
+    if (!state.isSelected(r, c)) state.selectCell(r, c);
+    setMenu({
+      x: e.clientX,
+      y: e.clientY,
+      kind: "cell",
+      r,
+      c
+    });
+  };
+  const openColumnMenu = (e, c) => {
+    if (props.contextMenu === false) return;
+    e.preventDefault();
+    setMenu({
+      x: e.clientX,
+      y: e.clientY,
+      kind: "column",
+      r: -1,
+      c
+    });
+  };
+  const cellMenuItems = (r, c) => {
+    const row = state.rowAt(r);
+    const col = state.colAt(c);
+    const rng = state.selectionRange();
+    const multi = !!rng && (rng.r2 > rng.r1 || rng.c2 > rng.c1);
+    const items = [];
+    if (row && col && !state.isColumnReadOnly(col)) {
+      const locked = state.isCellLockedAt(r, c);
+      items.push({
+        label: locked ? "Unlock cell" : "Lock cell",
+        run: () => state.toggleCellLock(row.id, col.key)
+      });
+    }
+    if (multi) {
+      items.push({
+        label: "Lock selection",
+        run: () => state.lockSelection(true)
+      });
+      items.push({
+        label: "Unlock selection",
+        run: () => state.lockSelection(false)
+      });
+    }
+    if (row) {
+      const locked = state.getRowLockState(row.id) === "all";
+      items.push({
+        label: locked ? "Unlock row" : "Lock row",
+        run: () => state.toggleRowLock(row.id)
+      });
+    }
+    items.push({
+      label: "",
+      separator: true
+    }, {
+      label: "Copy",
+      run: copy
+    }, {
+      label: "Clear",
+      run: () => state.clearRange()
+    });
+    if (props.contextMenuItems && row && col) {
+      const custom = props.contextMenuItems({
+        row,
+        col,
+        r,
+        c
+      });
+      if (custom.length) items.push({
+        label: "",
+        separator: true
+      }, ...custom);
+    }
+    return items;
+  };
+  const columnMenuItems = (c) => {
+    const col = state.colAt(c);
+    if (!col) return [];
+    const items = [];
+    if (props.sortable ?? true) {
+      items.push({
+        label: "Sort ascending",
+        run: () => state.setSort({
+          colKey: col.key,
+          dir: "asc"
+        })
+      });
+      items.push({
+        label: "Sort descending",
+        run: () => state.setSort({
+          colKey: col.key,
+          dir: "desc"
+        })
+      });
+      if (state.sort()?.colKey === col.key) items.push({
+        label: "Clear sort",
+        run: () => state.setSort(null)
+      });
+    }
+    if (!state.isColumnReadOnly(col)) {
+      const locked = state.getColumnLockState(col.key) === "all";
+      items.push({
+        label: "",
+        separator: true
+      }, {
+        label: locked ? "Unlock column" : "Lock column",
+        run: () => state.toggleColumnLock(col.key)
+      });
+    }
+    if (state.getColumnFilter(col.key)) items.push({
+      label: "Clear filter",
+      run: () => state.setColumnFilter(col.key, "")
+    });
+    if (state.columnWidths().has(col.key)) items.push({
+      label: "Reset width",
+      run: () => state.resetColumnWidth(col.key)
+    });
+    if (props.columnMenuItems) {
+      const custom = props.columnMenuItems({
+        col,
+        c
+      });
+      if (custom.length) items.push({
+        label: "",
+        separator: true
+      }, ...custom);
+    }
+    return items;
+  };
+  const menuItems = () => {
+    const m = menu();
+    if (!m) return [];
+    return m.kind === "column" ? columnMenuItems(m.c) : cellMenuItems(m.r, m.c);
+  };
+  createEffect(() => {
+    if (!menu()) return;
+    const onDown = (ev) => {
+      if (!ev.target.closest(".flx-ui-be-menu")) closeMenu();
+    };
+    const onScroll = () => closeMenu();
+    const onKey = (ev) => {
+      if (ev.key === "Escape") {
+        ev.stopPropagation();
+        closeMenu();
+      }
+    };
+    document.addEventListener("mousedown", onDown, true);
+    window.addEventListener("scroll", onScroll, true);
+    document.addEventListener("keydown", onKey, true);
+    onCleanup(() => {
+      document.removeEventListener("mousedown", onDown, true);
+      window.removeEventListener("scroll", onScroll, true);
+      document.removeEventListener("keydown", onKey, true);
+    });
+  });
+  onCleanup(() => setScrollEl(void 0));
+  const cellContent = (row, col, r, c) => {
+    if (col.type === "checkbox") {
+      return (() => {
+        const _el$ = createNativeElement("div");
+        spread({
+          element: _el$,
+          props: {
+            className: "flx-ui-be-check-wrap"
+          }
+        });
+        insert(_el$, (() => {
+          const _el$2 = createNativeElement("input");
+          spread({
+            element: _el$2,
+            props: {
+              className: "flx-ui-be-check",
+              type: "checkbox",
+              checked: () => state.getRawAt(r, c) === "1",
+              disabled: () => (col.disable?.({
+                row,
+                col
+              }) ?? false) || state.isCellLockedAt(r, c),
+              onClick: (e) => e.stopPropagation(),
+              onChange: (e) => {
+                e.stopPropagation();
+                state.setCellAt(r, c, e.target.checked ? "1" : "0");
+              }
+            }
+          });
+          return _el$2;
+        })());
+        return _el$;
+      })();
+    }
+    if (state.isEditing(r, c)) {
+      return (() => {
+        const _el$ = createNativeElement("input");
+        spread({
+          element: _el$,
+          props: {
+            className: "flx-ui-be-input",
+            type: "text",
+            inputmode: () => col.type === "number" ? "decimal" : void 0,
+            style: () => `text-align:${align(col)}`,
+            value: () => state.editBuffer(),
+            onInput: (e) => state.setEditBuffer(e.target.value),
+            onBlur: () => {
+              state.commitEdit();
+              containerEl?.focus();
+            },
+            onClick: (e) => e.stopPropagation()
+          }
+        });
+        return _el$;
+      })();
+    }
+    return (() => {
+      const _el$ = createNativeElement("div");
+      spread({
+        element: _el$,
+        props: {
+          className: "flx-ui-be-val",
+          style: () => `justify-content:${align(col) === "left" ? "flex-start" : align(col) === "center" ? "center" : "flex-end"}`
+        }
+      });
+      insert(_el$, () => {
+        const v = state.getDisplayAt(r, c);
+        return v ? v : (() => {
+          const _el$2 = createNativeElement("span");
+          spread({
+            element: _el$2,
+            props: {
+              className: "flx-ui-be-ph"
+            }
+          });
+          insert(_el$2, () => col.placeholder ?? "", null);
+          return _el$2;
+        })();
+      }, null);
+      return _el$;
+    })();
+  };
+  return (() => {
+    const _el$ = createNativeElement("div");
+    spread({
+      element: _el$,
+      props: {
+        className: () => props.class ? `flx-ui-bulk-editor ${props.class}` : "flx-ui-bulk-editor",
+        role: "grid",
+        tabindex: 0,
+        "aria-colcount": () => state.colCount() + 1,
+        ref: (el) => {
+          containerEl = el;
+        },
+        onFocus: () => setFocused(true),
+        onBlur: (e) => {
+          if (!containerEl?.contains(e.relatedTarget)) setFocused(false);
+        },
+        onKeyDown
+      }
+    });
+    insert(_el$, (() => {
+      const _el$2 = createNativeElement("div");
+      spread({
+        element: _el$2,
+        props: {
+          className: "flx-ui-be-scroll",
+          ref: (el) => setScrollEl(el),
+          style: () => props.maxHeight ? `max-height:${props.maxHeight}` : void 0
+        }
+      });
+      insert(_el$2, (() => {
+        const _el$3 = createNativeElement("table");
+        spread({
+          element: _el$3,
+          props: {
+            className: "flx-ui-be-table"
+          }
+        });
+        insert(_el$3, (() => {
+          const _el$4 = createNativeElement("thead");
+          insert(_el$4, (() => {
+            const _el$5 = createNativeElement("tr");
+            spread({
+              element: _el$5,
+              props: {
+                role: "row"
+              }
+            });
+            insert(_el$5, (() => {
+              const _el$6 = createNativeElement("th");
+              spread({
+                element: _el$6,
+                props: {
+                  className: "flx-ui-be-corner",
+                  style: () => `min-width:${labelWidth}px;width:${labelWidth}px`,
+                  onClick: () => state.selectAll(),
+                  title: "Select all (Ctrl+A)"
+                }
+              });
+              insert(_el$6, createMemo(() => typeof props.labelHeader === "function" ? props.labelHeader() : props.labelHeader ?? ""), null);
+              return _el$6;
+            })());
+            insert(_el$5, createMemo(() => createComponent(For, {
+              get each() {
+                return state.columns;
+              },
+              get children() {
+                return (col, ci) => (() => {
+                  const _el$6 = createNativeElement("th");
+                  spread({
+                    element: _el$6,
+                    props: {
+                      className: "flx-ui-be-colh",
+                      role: "columnheader",
+                      "data-col-head": () => String(ci()),
+                      "data-drop-target": () => dropCol() === col.key ? "" : void 0,
+                      style: () => `${colBox(col)};text-align:${align(col)}`,
+                      draggable: () => props.reorderable !== false,
+                      onClick: () => state.selectColumn(ci()),
+                      onContextMenu: (e) => openColumnMenu(e, ci()),
+                      onDragStart: (e) => {
+                        setDragCol(col.key);
+                        e.dataTransfer?.setData("text/plain", col.key);
+                      },
+                      onDragEnter: () => {
+                        if (dragCol() && dragCol() !== col.key) setDropCol(col.key);
+                      },
+                      onDragOver: (e) => {
+                        if (dragCol() && dragCol() !== col.key) e.preventDefault();
+                      },
+                      onDrop: (e) => {
+                        e.preventDefault();
+                        const from = dragCol();
+                        if (from) state.moveColumn(from, col.key);
+                        endReorder();
+                      },
+                      onDragEnd: endReorder
+                    }
+                  });
+                  insert(_el$6, createMemo(() => props.resizable !== false && (() => {
+                    const _el$7 = createNativeElement("div");
+                    spread({
+                      element: _el$7,
+                      props: {
+                        className: "flx-ui-be-col-resize",
+                        onMouseDown: (e) => startResize(e, col)
+                      }
+                    });
+                    return _el$7;
+                  })()), null);
+                  insert(_el$6, (() => {
+                    const _el$7 = createNativeElement("div");
+                    spread({
+                      element: _el$7,
+                      props: {
+                        className: "flx-ui-be-colh-inner"
+                      }
+                    });
+                    insert(_el$7, createMemo(() => col.type === "checkbox" && (() => {
+                      const _el$8 = createNativeElement("input");
+                      spread({
+                        element: _el$8,
+                        props: {
+                          type: "checkbox",
+                          className: "flx-ui-be-head-check",
+                          "aria-label": "Toggle all",
+                          ref: (el) => createEffect(() => {
+                            const st = state.getColumnCheckedState(col.key);
+                            el.checked = st === "all";
+                            el.indeterminate = st === "some";
+                          }),
+                          onClick: (e) => e.stopPropagation(),
+                          onChange: (e) => {
+                            e.stopPropagation();
+                            state.toggleColumnChecked(col.key);
+                          }
+                        }
+                      });
+                      return _el$8;
+                    })()), null);
+                    insert(_el$7, (() => {
+                      const _el$8 = createNativeElement("span");
+                      spread({
+                        element: _el$8,
+                        props: {
+                          className: "flx-ui-be-colh-label"
+                        }
+                      });
+                      insert(_el$8, createMemo(() => typeof col.header === "function" ? col.header() : col.header), null);
+                      return _el$8;
+                    })());
+                    insert(_el$7, () => col.headerExtra, null);
+                    insert(_el$7, createMemo(() => (props.sortable ?? true) && (() => {
+                      const _el$8 = createNativeElement("button");
+                      spread({
+                        element: _el$8,
+                        props: {
+                          type: "button",
+                          className: "flx-ui-be-sort",
+                          "aria-label": "Sort column",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            state.sortBy(col.key);
+                          }
+                        }
+                      });
+                      insert(_el$8, () => {
+                        const s = state.sort();
+                        return s && s.colKey === col.key ? s.dir === "asc" ? "▲" : "▼" : "↕";
+                      }, null);
+                      return _el$8;
+                    })()), null);
+                    return _el$7;
+                  })());
+                  return _el$6;
+                })();
+              }
+            })), null);
+            insert(_el$5, createMemo(() => hasActions() && (() => {
+              const _el$6 = createNativeElement("th");
+              spread({
+                element: _el$6,
+                props: {
+                  className: "flx-ui-be-actions-head"
+                }
+              });
+              return _el$6;
+            })()), null);
+            return _el$5;
+          })());
+          insert(_el$4, createMemo(() => props.filterRow && (() => {
+            const _el$5 = createNativeElement("tr");
+            spread({
+              element: _el$5,
+              props: {
+                role: "row",
+                className: "flx-ui-be-filter-row"
+              }
+            });
+            insert(_el$5, (() => {
+              const _el$6 = createNativeElement("th");
+              spread({
+                element: _el$6,
+                props: {
+                  className: "flx-ui-be-filter-corner",
+                  style: () => `min-width:${labelWidth}px;width:${labelWidth}px`
+                }
+              });
+              return _el$6;
+            })());
+            insert(_el$5, createMemo(() => createComponent(For, {
+              get each() {
+                return state.columns;
+              },
+              get children() {
+                return (col) => (() => {
+                  const _el$6 = createNativeElement("th");
+                  spread({
+                    element: _el$6,
+                    props: {
+                      className: "flx-ui-be-filter-cell",
+                      style: () => colBox(col)
+                    }
+                  });
+                  insert(_el$6, (() => {
+                    const _el$7 = createNativeElement("input");
+                    spread({
+                      element: _el$7,
+                      props: {
+                        className: "flx-ui-be-filter",
+                        type: "text",
+                        placeholder: () => col.type === "number" ? "e.g. >20" : "Filter…",
+                        value: () => state.getColumnFilter(col.key),
+                        onInput: (e) => state.setColumnFilter(col.key, e.target.value)
+                      }
+                    });
+                    return _el$7;
+                  })());
+                  return _el$6;
+                })();
+              }
+            })), null);
+            insert(_el$5, createMemo(() => hasActions() && (() => {
+              const _el$6 = createNativeElement("th");
+              spread({
+                element: _el$6,
+                props: {
+                  className: "flx-ui-be-filter-cell"
+                }
+              });
+              return _el$6;
+            })()), null);
+            return _el$5;
+          })()), null);
+          return _el$4;
+        })());
+        insert(_el$3, (() => {
+          const _el$4 = createNativeElement("tbody");
+          insert(_el$4, createMemo(() => createComponent(For, {
+            get each() {
+              return state.viewRows;
+            },
+            get children() {
+              return (row) => {
+                if (row.isGroup) {
+                  return (() => {
+                    const _el$5 = createNativeElement("tr");
+                    spread({
+                      element: _el$5,
+                      props: {
+                        role: "row",
+                        className: "flx-ui-be-group"
+                      }
+                    });
+                    insert(_el$5, (() => {
+                      const _el$6 = createNativeElement("th");
+                      spread({
+                        element: _el$6,
+                        props: {
+                          className: "flx-ui-be-group-label",
+                          style: () => `min-width:${labelWidth}px;width:${labelWidth}px`
+                        }
+                      });
+                      insert(_el$6, (() => {
+                        const _el$7 = createNativeElement("div");
+                        spread({
+                          element: _el$7,
+                          props: {
+                            className: "flx-ui-be-group-head"
+                          }
+                        });
+                        insert(_el$7, createMemo(() => row.thumbnail && (() => {
+                          const _el$8 = createNativeElement("img");
+                          spread({
+                            element: _el$8,
+                            props: {
+                              className: "flx-ui-be-group-thumb",
+                              src: () => row.thumbnail,
+                              alt: ""
+                            }
+                          });
+                          return _el$8;
+                        })()), null);
+                        insert(_el$7, (() => {
+                          const _el$8 = createNativeElement("span");
+                          insert(_el$8, () => row.label, null);
+                          return _el$8;
+                        })());
+                        insert(_el$7, createMemo(() => row.subLabel && (() => {
+                          const _el$8 = createNativeElement("span");
+                          spread({
+                            element: _el$8,
+                            props: {
+                              className: "flx-ui-be-rowh-sub"
+                            }
+                          });
+                          insert(_el$8, () => row.subLabel, null);
+                          return _el$8;
+                        })()), null);
+                        return _el$7;
+                      })());
+                      return _el$6;
+                    })());
+                    insert(_el$5, createMemo(() => createComponent(For, {
+                      get each() {
+                        return state.columns;
+                      },
+                      get children() {
+                        return (col) => (() => {
+                          const _el$6 = createNativeElement("td");
+                          spread({
+                            element: _el$6,
+                            props: {
+                              className: "flx-ui-be-group-cell",
+                              style: () => colBox(col)
+                            }
+                          });
+                          insert(_el$6, createMemo(() => row.groupData ? row.groupData[col.key] : null), null);
+                          return _el$6;
+                        })();
+                      }
+                    })), null);
+                    insert(_el$5, createMemo(() => hasActions() && (() => {
+                      const _el$6 = createNativeElement("td");
+                      spread({
+                        element: _el$6,
+                        props: {
+                          className: "flx-ui-be-group-cell"
+                        }
+                      });
+                      return _el$6;
+                    })()), null);
+                    return _el$5;
+                  })();
+                }
+                const di = () => dataIndex().get(row.id) ?? 0;
+                return (() => {
+                  const _el$5 = createNativeElement("tr");
+                  spread({
+                    element: _el$5,
+                    props: {
+                      role: "row"
+                    }
+                  });
+                  insert(_el$5, (() => {
+                    const _el$6 = createNativeElement("th");
+                    spread({
+                      element: _el$6,
+                      props: {
+                        className: "flx-ui-be-rowh",
+                        role: "rowheader",
+                        "data-row-lbl": () => String(di()),
+                        style: () => `min-width:${labelWidth}px;width:${labelWidth}px`,
+                        onClick: () => state.selectRow(di())
+                      }
+                    });
+                    insert(_el$6, (() => {
+                      const _el$7 = createNativeElement("div");
+                      spread({
+                        element: _el$7,
+                        props: {
+                          className: "flx-ui-be-rowh-inner"
+                        }
+                      });
+                      insert(_el$7, (() => {
+                        const _el$8 = createNativeElement("button");
+                        spread({
+                          element: _el$8,
+                          props: {
+                            className: "flx-ui-be-row-lock",
+                            type: "button",
+                            tabindex: () => -1,
+                            "aria-label": "Lock row",
+                            onMouseDown: (e) => e.stopPropagation(),
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              state.toggleRowLock(row.id);
+                            }
+                          }
+                        });
+                        insert(_el$8, createMemo(() => createComponent(Padlock, {})), null);
+                        return _el$8;
+                      })());
+                      insert(_el$7, (() => {
+                        const _el$8 = createNativeElement("div");
+                        spread({
+                          element: _el$8,
+                          props: {
+                            className: "flx-ui-be-rowh-text"
+                          }
+                        });
+                        insert(_el$8, (() => {
+                          const _el$9 = createNativeElement("div");
+                          spread({
+                            element: _el$9,
+                            props: {
+                              className: "flx-ui-be-rowh-label"
+                            }
+                          });
+                          insert(_el$9, () => row.label, null);
+                          return _el$9;
+                        })());
+                        insert(_el$8, createMemo(() => row.subLabel && (() => {
+                          const _el$9 = createNativeElement("div");
+                          spread({
+                            element: _el$9,
+                            props: {
+                              className: "flx-ui-be-rowh-sub"
+                            }
+                          });
+                          insert(_el$9, () => row.subLabel, null);
+                          return _el$9;
+                        })()), null);
+                        return _el$8;
+                      })());
+                      return _el$7;
+                    })());
+                    return _el$6;
+                  })());
+                  insert(_el$5, createMemo(() => createComponent(For, {
+                    get each() {
+                      return state.columns;
+                    },
+                    get children() {
+                      return (col, ci) => (() => {
+                        const _el$6 = createNativeElement("td");
+                        spread({
+                          element: _el$6,
+                          props: {
+                            className: "flx-ui-be-cell",
+                            role: "gridcell",
+                            "data-cell": () => `${di()}:${ci()}`,
+                            style: () => `${colBox(col)};text-align:${align(col)}`,
+                            onMouseDown: (e) => onCellMouseDown(e, di(), ci()),
+                            onDblClick: () => beginEdit(di(), ci()),
+                            onContextMenu: (e) => openMenu(e, di(), ci())
+                          }
+                        });
+                        insert(_el$6, () => cellContent(row, col, di(), ci()), null);
+                        insert(_el$6, createMemo(() => !state.isColumnReadOnly(col) && (() => {
+                          const _el$7 = createNativeElement("button");
+                          spread({
+                            element: _el$7,
+                            props: {
+                              className: "flx-ui-be-lock",
+                              type: "button",
+                              tabindex: () => -1,
+                              "aria-label": "Lock cell",
+                              onMouseDown: (e) => e.stopPropagation(),
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                state.toggleCellLock(row.id, col.key);
+                              }
+                            }
+                          });
+                          insert(_el$7, createMemo(() => createComponent(Padlock, {})), null);
+                          return _el$7;
+                        })()), null);
+                        insert(_el$6, createMemo(() => state.isAnchor(di(), ci()) && !state.isEditing(di(), ci()) && (() => {
+                          const _el$7 = createNativeElement("div");
+                          spread({
+                            element: _el$7,
+                            props: {
+                              className: "flx-ui-be-fill-handle",
+                              onMouseDown: onFillHandleDown
+                            }
+                          });
+                          return _el$7;
+                        })()), null);
+                        return _el$6;
+                      })();
+                    }
+                  })), null);
+                  insert(_el$5, createMemo(() => hasActions() && (() => {
+                    const _el$6 = createNativeElement("td");
+                    spread({
+                      element: _el$6,
+                      props: {
+                        className: "flx-ui-be-actions",
+                        onMouseDown: (e) => e.stopPropagation()
+                      }
+                    });
+                    insert(_el$6, () => row.rowActions, null);
+                    return _el$6;
+                  })()), null);
+                  return _el$5;
+                })();
+              };
+            }
+          })), null);
+          return _el$4;
+        })());
+        insert(_el$3, createMemo(() => showFooter() && (() => {
+          const _el$4 = createNativeElement("tfoot");
+          insert(_el$4, (() => {
+            const _el$5 = createNativeElement("tr");
+            spread({
+              element: _el$5,
+              props: {
+                role: "row",
+                className: "flx-ui-be-foot-row"
+              }
+            });
+            insert(_el$5, (() => {
+              const _el$6 = createNativeElement("th");
+              spread({
+                element: _el$6,
+                props: {
+                  className: "flx-ui-be-foot-corner",
+                  style: () => `min-width:${labelWidth}px;width:${labelWidth}px`
+                }
+              });
+              insert(_el$6, createMemo(() => typeof props.footerLabel === "function" ? props.footerLabel() : props.footerLabel ?? ""), null);
+              return _el$6;
+            })());
+            insert(_el$5, createMemo(() => createComponent(For, {
+              get each() {
+                return state.columns;
+              },
+              get children() {
+                return (col) => (() => {
+                  const _el$6 = createNativeElement("td");
+                  spread({
+                    element: _el$6,
+                    props: {
+                      className: "flx-ui-be-foot-cell",
+                      style: () => `${colBox(col)};text-align:${align(col)}`
+                    }
+                  });
+                  insert(_el$6, () => state.getColumnAggregate(col.key), null);
+                  return _el$6;
+                })();
+              }
+            })), null);
+            insert(_el$5, createMemo(() => hasActions() && (() => {
+              const _el$6 = createNativeElement("td");
+              spread({
+                element: _el$6,
+                props: {
+                  className: "flx-ui-be-foot-cell"
+                }
+              });
+              return _el$6;
+            })()), null);
+            return _el$5;
+          })());
+          return _el$4;
+        })()), null);
+        return _el$3;
+      })());
+      return _el$2;
+    })());
+    insert(_el$, createMemo(() => focused() && state.hasSelection() && (() => {
+      const _el$2 = createNativeElement("div");
+      spread({
+        element: _el$2,
+        props: {
+          className: "flx-ui-be-hints"
+        }
+      });
+      insert(_el$2, createMemo(() => createComponent(For, {
+        get each() {
+          return () => HINTS;
+        },
+        get children() {
+          return ([k, label]) => (() => {
+            const _el$3 = createNativeElement("span");
+            insert(_el$3, (() => {
+              const _el$4 = createNativeElement("kbd");
+              insert(_el$4, k);
+              return _el$4;
+            })());
+            insert(_el$3, " ");
+            insert(_el$3, label);
+            return _el$3;
+          })();
+        }
+      })), null);
+      return _el$2;
+    })()), null);
+    insert(_el$, () => {
+      const m = menu();
+      return m ? (() => {
+        const _el$2 = createNativeElement("div");
+        spread({
+          element: _el$2,
+          props: {
+            className: "flx-ui-be-menu",
+            role: "menu",
+            style: () => `left:${m.x}px;top:${m.y}px`
+          }
+        });
+        insert(_el$2, createMemo(() => createComponent(For, {
+          get each() {
+            return menuItems;
+          },
+          get children() {
+            return (item) => item.separator ? (() => {
+              const _el$3 = createNativeElement("div");
+              spread({
+                element: _el$3,
+                props: {
+                  role: "separator"
+                }
+              });
+              return _el$3;
+            })() : (() => {
+              const _el$3 = createNativeElement("button");
+              spread({
+                element: _el$3,
+                props: {
+                  type: "button",
+                  role: "menuitem",
+                  disabled: () => item.disabled,
+                  onClick: () => {
+                    item.run?.();
+                    closeMenu();
+                  }
+                }
+              });
+              insert(_el$3, () => item.label, null);
+              return _el$3;
+            })();
+          }
+        })), null);
+        return _el$2;
+      })() : null;
+    }, null);
+    return _el$;
+  })();
+}
+export {
+  BulkEditor
+};