@icen.ai/ui 0.2.1 → 0.4.0

package/dist/behaviors/datatable.mjs

@@ -0,0 +1,968 @@
+// src/behaviors/context-menu.ts
+var FLIP_MARGIN = 10;
+var CLAMP_MARGIN = 8;
+var panel = null;
+var focusableItems = [];
+var focusedIndex = -1;
+function buildItem(item) {
+  if ("type" in item && item.type === "separator") {
+    const sep = document.createElement("div");
+    sep.className = "menu-separator";
+    sep.setAttribute("role", "separator");
+    return sep;
+  }
+  if ("type" in item && item.type === "header") {
+    const header = document.createElement("div");
+    header.className = "menu-header";
+    const label2 = document.createElement("span");
+    label2.className = "menu-header-label";
+    label2.textContent = item.label;
+    header.appendChild(label2);
+    if (item.description) {
+      const desc = document.createElement("span");
+      desc.className = "menu-header-desc";
+      desc.textContent = item.description;
+      header.appendChild(desc);
+    }
+    return header;
+  }
+  const entry = item;
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.className = entry.danger ? "menu-item pressable menu-item--danger" : "menu-item pressable";
+  if (entry.disabled) btn.disabled = true;
+  btn.setAttribute("role", "menuitem");
+  btn.tabIndex = -1;
+  const icon = document.createElement("span");
+  icon.className = "menu-item-icon";
+  if (entry.icon) icon.innerHTML = entry.icon;
+  btn.appendChild(icon);
+  const label = document.createElement("span");
+  label.className = "menu-item-label";
+  label.textContent = entry.label;
+  if (entry.subLabel) {
+    const sub = document.createElement("span");
+    sub.className = "menu-item-sub";
+    sub.textContent = entry.subLabel;
+    label.appendChild(sub);
+  }
+  btn.appendChild(label);
+  if (entry.shortcut) {
+    const shortcut = document.createElement("span");
+    shortcut.className = "menu-item-shortcut";
+    shortcut.textContent = entry.shortcut;
+    btn.appendChild(shortcut);
+  }
+  btn.addEventListener("click", () => {
+    entry.onClick?.();
+    closeMenu();
+  });
+  return btn;
+}
+function openContextMenu(x, y, items) {
+  if (typeof document === "undefined") return;
+  closeMenu();
+  panel = document.createElement("div");
+  panel.className = "menu menu--context";
+  panel.setAttribute("role", "menu");
+  panel.style.visibility = "hidden";
+  for (const item of items) panel.appendChild(buildItem(item));
+  document.body.appendChild(panel);
+  const rect = panel.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  let nx = x;
+  let ny = y;
+  if (x + rect.width > vw - FLIP_MARGIN) nx = x - rect.width;
+  if (y + rect.height > vh - FLIP_MARGIN) ny = y - rect.height;
+  if (nx < CLAMP_MARGIN) nx = CLAMP_MARGIN;
+  if (ny < CLAMP_MARGIN) ny = CLAMP_MARGIN;
+  panel.style.left = `${nx}px`;
+  panel.style.top = `${ny}px`;
+  panel.style.visibility = "";
+  focusableItems = Array.from(panel.querySelectorAll(".menu-item:not(:disabled)"));
+  focusedIndex = -1;
+  requestAnimationFrame(() => {
+    if (!panel || focusableItems.length === 0) return;
+    setFocused(0);
+  });
+  document.addEventListener("pointerdown", onOutsidePointerDown, true);
+  document.addEventListener("scroll", onCloseSignal, true);
+  window.addEventListener("resize", onCloseSignal);
+  window.addEventListener("keydown", onKeyDown);
+}
+function closeMenu() {
+  if (!panel) return;
+  panel.remove();
+  panel = null;
+  focusableItems = [];
+  focusedIndex = -1;
+  document.removeEventListener("pointerdown", onOutsidePointerDown, true);
+  document.removeEventListener("scroll", onCloseSignal, true);
+  window.removeEventListener("resize", onCloseSignal);
+  window.removeEventListener("keydown", onKeyDown);
+}
+function setFocused(next) {
+  if (!panel || focusableItems.length === 0) return;
+  focusedIndex = (next % focusableItems.length + focusableItems.length) % focusableItems.length;
+  focusableItems[focusedIndex].focus();
+}
+function onOutsidePointerDown(e) {
+  if (!panel) return;
+  const target = e.target;
+  if (!(target instanceof Node) || !panel.contains(target)) closeMenu();
+}
+function onCloseSignal() {
+  closeMenu();
+}
+function onKeyDown(e) {
+  if (!panel) return;
+  if (e.key === "Escape") {
+    e.preventDefault();
+    closeMenu();
+    return;
+  }
+  if (focusableItems.length === 0) return;
+  if (e.key === "ArrowDown") {
+    e.preventDefault();
+    setFocused(focusedIndex + 1);
+  } else if (e.key === "ArrowUp") {
+    e.preventDefault();
+    setFocused(focusedIndex - 1);
+  } else if (e.key === "Enter" && focusedIndex >= 0) {
+    e.preventDefault();
+    focusableItems[focusedIndex].click();
+  }
+}
+
+// src/behaviors/datatable.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+function svgIcon(d, size = 12) {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("width", String(size));
+  svg.setAttribute("height", String(size));
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "2");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  const path = document.createElementNS(SVG_NS, "path");
+  path.setAttribute("d", d);
+  svg.appendChild(path);
+  return svg;
+}
+var ICON_SEARCH = "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm10 2-4.3-4.3";
+var ICON_FUNNEL = "M22 3H2l8 9.46V19l4 2v-8.54L22 3Z";
+var ICON_CHEVRON = "m6 9 6 6 6-6";
+var ICON_COLUMNS = "M3 3h7v18H3zM14 3h7v18h-7z";
+var ICON_DOWNLOAD = "M12 3v12m0 0-4-4m4 4 4-4M5 21h14";
+function defaultCompare(a, b) {
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  return String(a ?? "").localeCompare(String(b ?? ""), "zh-CN", { numeric: true });
+}
+function noopHandle() {
+  const noop = () => void 0;
+  return {
+    setData: noop,
+    getSelected: () => [],
+    clearSelection: noop,
+    setSearch: noop,
+    setFilter: noop,
+    setSort: noop,
+    refresh: noop,
+    destroy: noop,
+    getData: () => [],
+    exportCSV: noop,
+    showColumn: noop,
+    hideColumn: noop
+  };
+}
+function createTable(el, opts) {
+  if (typeof document === "undefined") return noopHandle();
+  let data = opts.data;
+  let search = "";
+  let page = 1;
+  let pageSize = opts.pageSize ?? 10;
+  let sortKey = null;
+  let sortDir = "asc";
+  let scrollTop = 0;
+  const filters = /* @__PURE__ */ new Map();
+  const selected = /* @__PURE__ */ new Set();
+  const expanded = /* @__PURE__ */ new Set();
+  const colWidths = /* @__PURE__ */ new Map();
+  const colHidden = /* @__PURE__ */ new Map();
+  let lastClickedIndex = -1;
+  let destroyed = false;
+  const virtual = opts.virtual === true;
+  const compact = opts.density === "compact";
+  const rowH = opts.rowHeight ?? (compact ? 32 : 44);
+  const pageSizes = opts.pageSizes ?? [10, 20, 50];
+  const selectable = opts.selectable === true;
+  const expandable = !virtual ? opts.expandable : void 0;
+  const resizable = opts.resizable !== false;
+  const cols = () => opts.columns.filter((c) => !(c.hidden || colHidden.get(c.key)));
+  const keyOf = (row, index) => {
+    if (typeof opts.rowKey === "function") return opts.rowKey(row);
+    if (typeof opts.rowKey === "string") return String(row[opts.rowKey]);
+    return String(index);
+  };
+  let keyCache = /* @__PURE__ */ new WeakMap();
+  const keyOfRow = (row) => keyCache.get(row) ?? keyOf(row, data.indexOf(row));
+  function rekey() {
+    keyCache = /* @__PURE__ */ new WeakMap();
+    data.forEach((r, i) => keyCache.set(r, keyOf(r, i)));
+  }
+  let pipelineCache = null;
+  function invalidate() {
+    pipelineCache = null;
+  }
+  function pipeline() {
+    if (pipelineCache) return pipelineCache;
+    let rows = data;
+    if (search) {
+      const q = search.toLowerCase();
+      rows = rows.filter(
+        (row) => cols().some((c) => String(row[c.key] ?? "").toLowerCase().includes(q))
+      );
+    }
+    if (filters.size > 0) {
+      rows = rows.filter((row) => {
+        for (const [key, allowed] of filters) {
+          if (!allowed.has(String(row[key] ?? ""))) return false;
+        }
+        return true;
+      });
+    }
+    if (sortKey) {
+      const col = opts.columns.find((c) => c.key === sortKey);
+      const cmp = col?.sortFn ? (a, b) => col.sortFn(a, b) : (a, b) => defaultCompare(a[sortKey], b[sortKey]);
+      rows = [...rows].sort((a, b) => sortDir === "asc" ? cmp(a, b) : -cmp(a, b));
+    }
+    pipelineCache = rows;
+    return rows;
+  }
+  el.textContent = "";
+  const root = document.createElement("div");
+  root.className = "datatable";
+  if (opts.striped) root.classList.add("datatable--striped");
+  if (virtual) root.classList.add("datatable--virtual");
+  if (compact) root.classList.add("datatable--compact");
+  if (opts.columns.some((c) => c.frozen)) root.classList.add("datatable--frozen");
+  let searchInput = null;
+  const needsToolbar = opts.searchable || opts.columnVisibility || opts.exportable;
+  let toolbar = null;
+  if (needsToolbar) {
+    toolbar = document.createElement("div");
+    toolbar.className = "dt-toolbar";
+    if (opts.searchable) {
+      const box = document.createElement("div");
+      box.className = "dt-search";
+      box.appendChild(svgIcon(ICON_SEARCH, 14));
+      searchInput = document.createElement("input");
+      searchInput.className = "dt-search-input";
+      searchInput.type = "search";
+      searchInput.placeholder = opts.searchPlaceholder ?? "\u641C\u7D22\u2026";
+      searchInput.setAttribute("aria-label", "\u641C\u7D22\u8868\u683C");
+      box.appendChild(searchInput);
+      toolbar.appendChild(box);
+    }
+    const actions = document.createElement("div");
+    actions.className = "dt-toolbar-actions";
+    if (opts.columnVisibility) {
+      const colBtn = document.createElement("button");
+      colBtn.type = "button";
+      colBtn.className = "dt-tool-btn";
+      colBtn.setAttribute("aria-label", "\u5217\u8BBE\u7F6E");
+      colBtn.appendChild(svgIcon(ICON_COLUMNS, 14));
+      colBtn.addEventListener("click", (ev) => {
+        ev.stopPropagation();
+        if (openPanel?.key === "__cols") closeFilterPanel();
+        else {
+          closeFilterPanel();
+          openColumnPanel(colBtn);
+        }
+      });
+      actions.appendChild(colBtn);
+    }
+    if (opts.exportable) {
+      const expBtn = document.createElement("button");
+      expBtn.type = "button";
+      expBtn.className = "dt-tool-btn";
+      expBtn.setAttribute("aria-label", "\u5BFC\u51FA CSV");
+      expBtn.appendChild(svgIcon(ICON_DOWNLOAD, 14));
+      expBtn.addEventListener("click", () => exportCSV());
+      actions.appendChild(expBtn);
+    }
+    if (actions.children.length > 0) toolbar.appendChild(actions);
+    root.appendChild(toolbar);
+  }
+  const scroll = document.createElement("div");
+  scroll.className = "dt-scroll";
+  if (virtual) scroll.style.maxHeight = opts.height ?? "420px";
+  const canvas = document.createElement("div");
+  canvas.className = "dt-canvas";
+  canvas.setAttribute("role", "grid");
+  const head = document.createElement("div");
+  head.className = "dt-head";
+  head.setAttribute("role", "rowgroup");
+  const headRow = document.createElement("div");
+  headRow.className = "dt-row dt-row--head";
+  headRow.setAttribute("role", "row");
+  head.appendChild(headRow);
+  const body = document.createElement("div");
+  body.className = "dt-body";
+  body.setAttribute("role", "rowgroup");
+  canvas.append(head, body);
+  scroll.appendChild(canvas);
+  root.appendChild(scroll);
+  const foot = document.createElement("div");
+  foot.className = "dt-foot";
+  root.appendChild(foot);
+  el.appendChild(root);
+  function frozenOffsets() {
+    const offsets = /* @__PURE__ */ new Map();
+    if (!opts.columns.some((c) => c.frozen)) return offsets;
+    const visible = cols();
+    let acc = 0;
+    if (selectable) acc += 40;
+    if (expandable) acc += 34;
+    for (const c of visible) {
+      if (c.frozen) offsets.set(c.key, acc);
+      const w = colWidths.get(c.key) ?? c.width ?? "minmax(0,1fr)";
+      acc += parsePx(w);
+    }
+    return offsets;
+  }
+  function parsePx(w) {
+    const m = /^(\d+(?:\.\d+)?)px/.exec(w);
+    return m ? Number(m[1]) : 0;
+  }
+  function template() {
+    const parts = [];
+    if (selectable) parts.push("40px");
+    if (expandable) parts.push("34px");
+    for (const c of cols()) parts.push(colWidths.get(c.key) ?? c.width ?? "minmax(0,1fr)");
+    return parts.join(" ");
+  }
+  function fillCell(cell, col, row, rowIndex) {
+    const value = row[col.key];
+    if (col.render) {
+      const out = col.render(value, row, rowIndex);
+      if (out instanceof Node) cell.appendChild(out);
+      else if (out !== null && out !== void 0) cell.textContent = String(out);
+    } else {
+      cell.textContent = String(value ?? "");
+    }
+  }
+  function makeCheck(checked, label) {
+    const input = document.createElement("input");
+    input.type = "checkbox";
+    input.className = "dt-check";
+    input.checked = checked;
+    input.setAttribute("aria-label", label);
+    return input;
+  }
+  let openPanel = null;
+  function onPanelScroll(ev) {
+    if (openPanel && ev.target instanceof Node && openPanel.el.contains(ev.target)) return;
+    closeFilterPanel();
+  }
+  function closeFilterPanel() {
+    if (!openPanel) return;
+    openPanel.el.remove();
+    openPanel = null;
+    headRow.querySelectorAll(".dt-filter-btn").forEach((b) => b.classList.remove("is-open"));
+    window.removeEventListener("scroll", onPanelScroll, true);
+    window.removeEventListener("resize", onPanelScroll);
+  }
+  function openFilterPanel(col, btn) {
+    const panel2 = buildFilterPanel(col);
+    document.body.appendChild(panel2);
+    openPanel = { key: col.key, el: panel2 };
+    btn.classList.add("is-open");
+    const rect = btn.getBoundingClientRect();
+    const pr = panel2.getBoundingClientRect();
+    let x = rect.right - pr.width;
+    let y = rect.bottom + 4;
+    if (x < 8) x = 8;
+    if (y + pr.height > window.innerHeight - 8) y = rect.top - pr.height - 4;
+    panel2.style.left = `${x}px`;
+    panel2.style.top = `${y}px`;
+    panel2.hidden = false;
+    window.addEventListener("scroll", onPanelScroll, true);
+    window.addEventListener("resize", onPanelScroll);
+  }
+  function renderHead() {
+    closeFilterPanel();
+    headRow.textContent = "";
+    headRow.style.gridTemplateColumns = template();
+    if (selectable) {
+      const cell = document.createElement("div");
+      cell.className = "dt-cell dt-cell--check";
+      const rows = pipeline();
+      const allKeys = rows.map((r) => keyOfRow(r));
+      const selCount = allKeys.filter((k) => selected.has(k)).length;
+      const box = makeCheck(selCount > 0 && selCount === allKeys.length, "\u5168\u9009");
+      box.indeterminate = selCount > 0 && selCount < allKeys.length;
+      box.addEventListener("change", () => {
+        if (box.checked) allKeys.forEach((k) => selected.add(k));
+        else allKeys.forEach((k) => selected.delete(k));
+        emitSelection();
+        renderBody();
+        renderHead();
+      });
+      cell.appendChild(box);
+      headRow.appendChild(cell);
+    }
+    if (expandable) {
+      const cell = document.createElement("div");
+      cell.className = "dt-cell dt-cell--expand";
+      headRow.appendChild(cell);
+    }
+    for (const col of cols()) {
+      const cell = document.createElement("div");
+      cell.className = "dt-cell dt-cell--head";
+      if (col.align) cell.dataset.align = col.align;
+      if (col.frozen) cell.classList.add("dt-cell--frozen");
+      const title = document.createElement("span");
+      title.className = "dt-head-title";
+      title.textContent = col.title;
+      cell.appendChild(title);
+      if (col.sortable) {
+        cell.classList.add("is-sortable");
+        cell.setAttribute("role", "columnheader");
+        cell.tabIndex = 0;
+        const active = sortKey === col.key;
+        cell.setAttribute("aria-sort", active ? sortDir === "asc" ? "ascending" : "descending" : "none");
+        const arrow = document.createElement("span");
+        arrow.className = "dt-sort";
+        arrow.textContent = active ? sortDir === "asc" ? "\u2191" : "\u2193" : "\u2195";
+        if (active) arrow.classList.add("is-active");
+        cell.appendChild(arrow);
+        const toggleSort = () => {
+          if (sortKey !== col.key) {
+            sortKey = col.key;
+            sortDir = "asc";
+          } else if (sortDir === "asc") sortDir = "desc";
+          else sortKey = null;
+          invalidate();
+          opts.onSortChange?.(sortKey, sortDir);
+          renderAll();
+        };
+        cell.addEventListener("click", (ev) => {
+          if (ev.target.closest(".dt-filter-btn, .dt-resize")) return;
+          toggleSort();
+        });
+        cell.addEventListener("keydown", (ev) => {
+          if (ev.key === "Enter" || ev.key === " ") {
+            ev.preventDefault();
+            toggleSort();
+          }
+        });
+      }
+      if (col.filterable) {
+        const hasFilter = filters.has(col.key);
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "dt-filter-btn";
+        if (hasFilter) btn.classList.add("is-active");
+        btn.setAttribute("aria-label", `\u7B5B\u9009\u300C${col.title}\u300D`);
+        btn.appendChild(svgIcon(ICON_FUNNEL, 12));
+        btn.addEventListener("click", (ev) => {
+          ev.stopPropagation();
+          if (openPanel?.key === col.key) closeFilterPanel();
+          else {
+            closeFilterPanel();
+            openFilterPanel(col, btn);
+          }
+        });
+        cell.appendChild(btn);
+      }
+      if (resizable && col !== cols()[cols().length - 1]) {
+        const handle = document.createElement("div");
+        handle.className = "dt-resize";
+        handle.setAttribute("role", "separator");
+        handle.setAttribute("aria-orientation", "vertical");
+        handle.setAttribute("aria-label", `\u8C03\u6574\u300C${col.title}\u300D\u5217\u5BBD`);
+        attachResize(handle, col);
+        cell.appendChild(handle);
+      }
+      headRow.appendChild(cell);
+    }
+  }
+  function attachResize(handle, col) {
+    handle.addEventListener("pointerdown", (ev) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      const startX = ev.clientX;
+      const startW = handle.closest(".dt-cell").getBoundingClientRect().width;
+      handle.setPointerCapture(ev.pointerId);
+      const onMove = (e) => {
+        const delta = e.clientX - startX;
+        const next = Math.max(48, Math.round(startW + delta));
+        colWidths.set(col.key, `${next}px`);
+        headRow.style.gridTemplateColumns = template();
+        body.querySelectorAll(".dt-row").forEach((r) => {
+          r.style.gridTemplateColumns = template();
+        });
+      };
+      const onUp = (e) => {
+        handle.releasePointerCapture(e.pointerId);
+        handle.removeEventListener("pointermove", onMove);
+        handle.removeEventListener("pointerup", onUp);
+      };
+      handle.addEventListener("pointermove", onMove);
+      handle.addEventListener("pointerup", onUp);
+    });
+  }
+  function openColumnPanel(btn) {
+    const panel2 = document.createElement("div");
+    panel2.className = "dt-filter-panel dt-col-panel";
+    panel2.hidden = true;
+    panel2.addEventListener("click", (ev) => ev.stopPropagation());
+    const list = document.createElement("div");
+    list.className = "dt-filter-list";
+    for (const col of opts.columns) {
+      if (col.key === "__select" || col.key === "__expand") continue;
+      const row = document.createElement("label");
+      row.className = "dt-filter-item";
+      const isHidden = colHidden.get(col.key) ?? col.hidden ?? false;
+      const box = makeCheck(!isHidden, col.title);
+      box.addEventListener("change", () => {
+        if (box.checked) colHidden.delete(col.key);
+        else colHidden.set(col.key, true);
+        invalidate();
+        renderAll();
+      });
+      const text = document.createElement("span");
+      text.textContent = col.title;
+      row.append(box, text);
+      list.appendChild(row);
+    }
+    panel2.appendChild(list);
+    document.body.appendChild(panel2);
+    openPanel = { key: "__cols", el: panel2 };
+    const rect = btn.getBoundingClientRect();
+    const pr = panel2.getBoundingClientRect();
+    let x = rect.right - pr.width;
+    let y = rect.bottom + 4;
+    if (x < 8) x = 8;
+    if (y + pr.height > window.innerHeight - 8) y = rect.top - pr.height - 4;
+    panel2.style.left = `${x}px`;
+    panel2.style.top = `${y}px`;
+    panel2.hidden = false;
+    window.addEventListener("scroll", onPanelScroll, true);
+    window.addEventListener("resize", onPanelScroll);
+  }
+  function exportCSV(filename) {
+    const rows = pipeline();
+    const visible = cols();
+    const header = visible.map((c) => csvEscape(c.title)).join(",");
+    const lines = rows.map(
+      (row) => visible.map((c) => csvEscape(String(row[c.key] ?? ""))).join(",")
+    );
+    const csv = "\uFEFF" + [header, ...lines].join("\r\n");
+    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename ?? "export.csv";
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+  function csvEscape(s) {
+    if (/[",\r\n]/.test(s)) return `"${s.replace(/"/g, '""')}"`;
+    return s;
+  }
+  function buildFilterPanel(col) {
+    const panel2 = document.createElement("div");
+    panel2.className = "dt-filter-panel";
+    panel2.hidden = true;
+    panel2.addEventListener("click", (ev) => ev.stopPropagation());
+    const list = document.createElement("div");
+    list.className = "dt-filter-list";
+    const values = Array.from(new Set(data.map((r) => String(r[col.key] ?? "")))).sort((a, b) => a.localeCompare(b, "zh-CN", { numeric: true }));
+    for (const v of values) {
+      const row = document.createElement("label");
+      row.className = "dt-filter-item";
+      const box = makeCheck(filters.get(col.key)?.has(v) ?? true, v);
+      box.addEventListener("change", () => {
+        const cur = new Set(filters.get(col.key) ?? values);
+        if (box.checked) cur.add(v);
+        else cur.delete(v);
+        if (cur.size === values.length) filters.delete(col.key);
+        else filters.set(col.key, cur);
+        invalidate();
+        page = 1;
+        renderAll();
+      });
+      const text = document.createElement("span");
+      text.textContent = v === "" ? "\uFF08\u7A7A\uFF09" : v;
+      row.append(box, text);
+      list.appendChild(row);
+    }
+    const footRow = document.createElement("div");
+    footRow.className = "dt-filter-foot";
+    const reset = document.createElement("button");
+    reset.type = "button";
+    reset.className = "dt-filter-reset";
+    reset.textContent = "\u91CD\u7F6E";
+    reset.addEventListener("click", () => {
+      filters.delete(col.key);
+      invalidate();
+      page = 1;
+      closeFilterPanel();
+      renderAll();
+    });
+    footRow.appendChild(reset);
+    panel2.append(list, footRow);
+    return panel2;
+  }
+  function makeRow(row, rowIndex, key) {
+    const tr = document.createElement("div");
+    tr.className = "dt-row";
+    tr.setAttribute("role", "row");
+    tr.style.gridTemplateColumns = template();
+    if (virtual) tr.style.height = `${rowH}px`;
+    if (selected.has(key)) tr.classList.add("is-selected");
+    if (opts.rowClassName) {
+      const extra = opts.rowClassName(row, rowIndex);
+      if (extra) tr.classList.add(...extra.split(/\s+/).filter(Boolean));
+    }
+    if (selectable) {
+      const cell = document.createElement("div");
+      cell.className = "dt-cell dt-cell--check";
+      if (frozenOffsets().size > 0 && selectable) {
+        cell.classList.add("dt-cell--frozen");
+        cell.style.left = "0px";
+      }
+      const box = makeCheck(selected.has(key), "\u9009\u62E9\u8BE5\u884C");
+      box.addEventListener("click", (ev) => {
+        box._shift = ev.shiftKey;
+        ev.stopPropagation();
+      });
+      box.addEventListener("change", () => {
+        const shift = box._shift === true;
+        if (shift && lastClickedIndex >= 0 && lastClickedIndex !== rowIndex) {
+          const rows = pipeline();
+          const [lo, hi] = lastClickedIndex < rowIndex ? [lastClickedIndex, rowIndex] : [rowIndex, lastClickedIndex];
+          const willSelect = box.checked;
+          for (let i = lo; i <= hi; i++) {
+            const k = keyOfRow(rows[i]);
+            if (willSelect) selected.add(k);
+            else selected.delete(k);
+          }
+          renderBody();
+        } else {
+          if (box.checked) selected.add(key);
+          else selected.delete(key);
+          tr.classList.toggle("is-selected", box.checked);
+        }
+        lastClickedIndex = rowIndex;
+        emitSelection();
+        renderHead();
+        renderFoot(pipeline().length);
+      });
+      cell.appendChild(box);
+      tr.appendChild(cell);
+    }
+    if (expandable) {
+      const cell = document.createElement("div");
+      cell.className = "dt-cell dt-cell--expand";
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "dt-expand-btn";
+      btn.setAttribute("aria-label", "\u5C55\u5F00\u884C");
+      btn.setAttribute("aria-expanded", String(expanded.has(key)));
+      btn.appendChild(svgIcon(ICON_CHEVRON, 14));
+      btn.addEventListener("click", (ev) => {
+        ev.stopPropagation();
+        if (expanded.has(key)) expanded.delete(key);
+        else expanded.add(key);
+        renderBody();
+      });
+      cell.appendChild(btn);
+      tr.appendChild(cell);
+    }
+    const offsets = frozenOffsets();
+    for (const col of cols()) {
+      const cell = document.createElement("div");
+      cell.className = "dt-cell";
+      if (col.align) cell.dataset.align = col.align;
+      if (col.frozen) {
+        cell.classList.add("dt-cell--frozen");
+        const off = offsets.get(col.key);
+        if (off != null) cell.style.left = `${off}px`;
+      }
+      fillCell(cell, col, row, rowIndex);
+      tr.appendChild(cell);
+    }
+    if (opts.onRowClick) {
+      tr.classList.add("is-clickable");
+      tr.addEventListener("click", () => opts.onRowClick(row));
+    }
+    if (opts.contextMenu) {
+      tr.addEventListener("contextmenu", (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        openContextMenu(ev.clientX, ev.clientY, opts.contextMenu(row));
+      });
+    }
+    return tr;
+  }
+  function makeExpandRow(row) {
+    const wrap = document.createElement("div");
+    wrap.className = "dt-expand-row";
+    const out = expandable(row);
+    if (out instanceof Node) wrap.appendChild(out);
+    else wrap.textContent = String(out);
+    return wrap;
+  }
+  function visibleRange(total) {
+    if (!virtual) {
+      if (opts.pagination === false) return [0, total];
+      const start2 = (page - 1) * pageSize;
+      return [start2, Math.min(total, start2 + pageSize)];
+    }
+    const viewH = scroll.clientHeight || 420;
+    const overscan = 6;
+    const start = Math.max(0, Math.floor(scrollTop / rowH) - overscan);
+    const end = Math.min(total, Math.ceil((scrollTop + viewH) / rowH) + overscan);
+    return [start, end];
+  }
+  function renderBody() {
+    const rows = pipeline();
+    const total = rows.length;
+    const keepTop = virtual ? scroll.scrollTop : 0;
+    body.textContent = "";
+    if (opts.loading) {
+      for (let i = 0; i < Math.min(pageSize, 8); i++) {
+        const sk = document.createElement("div");
+        sk.className = "dt-skeleton-row";
+        const bar = document.createElement("div");
+        bar.className = "skeleton";
+        bar.style.height = "14px";
+        bar.style.width = `${88 - i % 3 * 14}%`;
+        sk.appendChild(bar);
+        body.appendChild(sk);
+      }
+      renderFoot(total);
+      return;
+    }
+    if (total === 0) {
+      const empty = document.createElement("div");
+      empty.className = "dt-empty";
+      empty.textContent = opts.emptyLabel ?? "\u6682\u65E0\u6570\u636E";
+      body.appendChild(empty);
+      renderFoot(total);
+      return;
+    }
+    const [start, end] = visibleRange(total);
+    const frag = document.createDocumentFragment();
+    if (virtual && start > 0) {
+      const top = document.createElement("div");
+      top.style.height = `${start * rowH}px`;
+      frag.appendChild(top);
+    }
+    for (let i = start; i < end; i++) {
+      const row = rows[i];
+      const key = keyOfRow(row);
+      frag.appendChild(makeRow(row, i, key));
+      if (expandable && expanded.has(key)) frag.appendChild(makeExpandRow(row));
+    }
+    if (virtual && end < total) {
+      const bottom = document.createElement("div");
+      bottom.style.height = `${(total - end) * rowH}px`;
+      frag.appendChild(bottom);
+    }
+    body.appendChild(frag);
+    if (virtual) scroll.scrollTop = keepTop;
+    renderFoot(total);
+  }
+  function renderFoot(total) {
+    foot.textContent = "";
+    const stat = document.createElement("span");
+    stat.className = "dt-stat";
+    stat.textContent = `\u5171 ${total} \u6761`;
+    foot.appendChild(stat);
+    if (selectable && selected.size > 0) {
+      const sel = document.createElement("span");
+      sel.className = "dt-stat dt-stat--sel";
+      sel.textContent = `\u5DF2\u9009 ${selected.size} \u9879`;
+      const clear = document.createElement("button");
+      clear.type = "button";
+      clear.className = "dt-clear-sel";
+      clear.textContent = "\u6E05\u7A7A";
+      clear.addEventListener("click", () => {
+        selected.clear();
+        emitSelection();
+        renderAll();
+      });
+      sel.appendChild(clear);
+      foot.appendChild(sel);
+    }
+    if (virtual || opts.pagination === false || total <= pageSize) return;
+    const pages = Math.ceil(total / pageSize);
+    const pager = document.createElement("nav");
+    pager.className = "dt-pager";
+    pager.setAttribute("aria-label", "\u5206\u9875");
+    const sizeSel = document.createElement("select");
+    sizeSel.className = "dt-page-size";
+    sizeSel.setAttribute("aria-label", "\u6BCF\u9875\u6761\u6570");
+    for (const s of pageSizes) {
+      const o = document.createElement("option");
+      o.value = String(s);
+      o.textContent = `${s} \u6761/\u9875`;
+      if (s === pageSize) o.selected = true;
+      sizeSel.appendChild(o);
+    }
+    sizeSel.addEventListener("change", () => {
+      pageSize = Number(sizeSel.value);
+      page = 1;
+      renderAll();
+    });
+    pager.appendChild(sizeSel);
+    const pageBtn = (label, target, opts2 = {}) => {
+      const b = document.createElement("button");
+      b.type = "button";
+      b.className = "dt-page-btn";
+      if (opts2.active) b.classList.add("is-active");
+      b.disabled = opts2.disabled === true;
+      b.textContent = label;
+      if (opts2.aria) b.setAttribute("aria-label", opts2.aria);
+      b.addEventListener("click", () => {
+        page = target;
+        renderAll();
+      });
+      return b;
+    };
+    pager.appendChild(pageBtn("\u2039", page - 1, { disabled: page <= 1, aria: "\u4E0A\u4E00\u9875" }));
+    const win = [];
+    for (let p = 1; p <= pages; p++) {
+      if (p === 1 || p === pages || Math.abs(p - page) <= 2) win.push(p);
+    }
+    let last = 0;
+    for (const p of win) {
+      if (p - last > 1) {
+        const dots = document.createElement("span");
+        dots.className = "dt-page-dots";
+        dots.textContent = "\u2026";
+        pager.appendChild(dots);
+      }
+      pager.appendChild(pageBtn(String(p), p, { active: p === page }));
+      last = p;
+    }
+    pager.appendChild(pageBtn("\u203A", page + 1, { disabled: page >= pages, aria: "\u4E0B\u4E00\u9875" }));
+    foot.appendChild(pager);
+  }
+  let searchTimer = 0;
+  function onSearch() {
+    window.clearTimeout(searchTimer);
+    searchTimer = window.setTimeout(() => {
+      search = searchInput?.value.trim() ?? "";
+      invalidate();
+      page = 1;
+      renderAll();
+    }, 160);
+  }
+  searchInput?.addEventListener("input", onSearch);
+  function onScroll() {
+    scrollTop = scroll.scrollTop;
+    renderBody();
+  }
+  if (virtual) scroll.addEventListener("scroll", onScroll, { passive: true });
+  function onDocPointerDown(ev) {
+    if (!openPanel) return;
+    const t = ev.target;
+    if (t instanceof Node && (openPanel.el.contains(t) || headRow.contains(t) || toolbar?.contains(t))) return;
+    closeFilterPanel();
+  }
+  document.addEventListener("pointerdown", onDocPointerDown, true);
+  function onDocKeydown(ev) {
+    if (ev.key === "Escape") closeFilterPanel();
+  }
+  document.addEventListener("keydown", onDocKeydown);
+  function emitSelection() {
+    if (!opts.onSelectionChange) return;
+    const rows = data.filter((r) => selected.has(keyOfRow(r)));
+    opts.onSelectionChange(rows);
+  }
+  function renderAll() {
+    if (destroyed) return;
+    renderHead();
+    renderBody();
+  }
+  rekey();
+  renderAll();
+  return {
+    setData(next) {
+      data = next;
+      rekey();
+      invalidate();
+      page = 1;
+      renderAll();
+    },
+    getSelected() {
+      return data.filter((r) => selected.has(keyOfRow(r)));
+    },
+    clearSelection() {
+      selected.clear();
+      emitSelection();
+      renderAll();
+    },
+    setSearch(q) {
+      search = q;
+      if (searchInput) searchInput.value = q;
+      invalidate();
+      page = 1;
+      renderAll();
+    },
+    setFilter(key, values) {
+      if (values === null) filters.delete(key);
+      else filters.set(key, new Set(values));
+      invalidate();
+      page = 1;
+      renderAll();
+    },
+    setSort(key, dir = "asc") {
+      sortKey = key;
+      sortDir = dir;
+      invalidate();
+      opts.onSortChange?.(sortKey, sortDir);
+      renderAll();
+    },
+    getData() {
+      return pipeline();
+    },
+    exportCSV,
+    showColumn(key) {
+      colHidden.delete(key);
+      opts.columns.find((c) => c.key === key).hidden = false;
+      invalidate();
+      renderAll();
+    },
+    hideColumn(key) {
+      colHidden.set(key, true);
+      invalidate();
+      renderAll();
+    },
+    refresh() {
+      invalidate();
+      renderAll();
+    },
+    destroy() {
+      destroyed = true;
+      window.clearTimeout(searchTimer);
+      closeFilterPanel();
+      searchInput?.removeEventListener("input", onSearch);
+      if (virtual) scroll.removeEventListener("scroll", onScroll);
+      document.removeEventListener("pointerdown", onDocPointerDown, true);
+      document.removeEventListener("keydown", onDocKeydown);
+      el.textContent = "";
+    }
+  };
+}
+export {
+  createTable
+};