@simplysm/solid 13.0.0-beta.6 → 13.0.1

package/dist/components/data/sheet/DataSheet.js

@@ -1,97 +1,41 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ _$template(`<button title="\uC2DC\uD2B8 \uC124\uC815"type=button>`), _tmpl$2 = /* @__PURE__ */ _$template(`<div><div class=flex-1>`), _tmpl$3 = /* @__PURE__ */ _$template(`<col>`), _tmpl$4 = /* @__PURE__ */ _$template(`<tr>`), _tmpl$5 = /* @__PURE__ */ _$template(`<div><div data-sheet-scroll><table><colgroup></colgroup><thead></thead><tbody></tbody></table><div></div><div data-reorder-indicator style=display:none>`), _tmpl$6 = /* @__PURE__ */ _$template(`<th style=top:0;left:0><div><button type=button>`), _tmpl$7 = /* @__PURE__ */ _$template(`<div>`), _tmpl$8 = /* @__PURE__ */ _$template(`<th style=top:0>`), _tmpl$9 = /* @__PURE__ */ _$template(`<th><div><div class=flex-1>`), _tmpl$0 = /* @__PURE__ */ _$template(`<sub>`), _tmpl$1 = /* @__PURE__ */ _$template(`<th><div>`), _tmpl$10 = /* @__PURE__ */ _$template(`<button type=button>`), _tmpl$11 = /* @__PURE__ */ _$template(`<td style=left:0><div>`), _tmpl$12 = /* @__PURE__ */ _$template(`<td><div><div>`), _tmpl$13 = /* @__PURE__ */ _$template(`<div><div>`), _tmpl$14 = /* @__PURE__ */ _$template(`<td>`);
 import { children, createMemo, createSignal, For, Show, splitProps, useContext } from "solid-js";
 import { createResizeObserver } from "@solid-primitives/resize-observer";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import {
-  IconArrowsSort,
-  IconChevronDown,
-  IconChevronRight,
-  IconGripVertical,
-  IconSettings,
-  IconSortAscending,
-  IconSortDescending
-} from "@tabler/icons-solidjs";
+import { IconArrowsSort, IconChevronDown, IconChevronRight, IconGripVertical, IconSettings, IconSortAscending, IconSortDescending } from "@tabler/icons-solidjs";
 import "@simplysm/core-browser";
-import { isDataSheetColumnDef, DataSheetColumn } from "./DataSheetColumn";
-import { applySorting, buildHeaderTable, collectAllExpandable, flattenTree } from "./sheetUtils";
-import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { Icon } from "../../display/Icon";
-import { Checkbox } from "../../form-control/checkbox/Checkbox";
-import { Pagination } from "../Pagination";
-import { usePersisted } from "../../../hooks/usePersisted";
-import { DialogContext } from "../../disclosure/DialogContext";
+import { isDataSheetColumnDef, DataSheetColumn } from "./DataSheetColumn.js";
+import { applySorting, buildHeaderTable, collectAllExpandable, flattenTree } from "./sheetUtils.js";
+import { createControllableSignal } from "../../../hooks/createControllableSignal.js";
+import { Icon } from "../../display/Icon.js";
+import { Checkbox } from "../../form-control/checkbox/Checkbox.js";
+import { Pagination } from "../Pagination.js";
+import { useSyncConfig } from "../../../hooks/useSyncConfig.js";
+import { DialogContext } from "../../disclosure/DialogContext.js";
 import "./DataSheet.css";
-import {
-  configButtonClass,
-  defaultContainerClass,
-  expandIndentGuideClass,
-  expandIndentGuideLineClass,
-  expandToggleClass,
-  featureCellBodyClickableClass,
-  featureCellBodyWrapperClass,
-  featureCellClickableClass,
-  featureCellWrapperClass,
-  featureTdClass,
-  featureThClass,
-  fixedClass,
-  fixedLastClass,
-  insetContainerClass,
-  insetTableClass,
-  reorderCellWrapperClass,
-  reorderHandleClass,
-  reorderIndicatorClass,
-  resizeIndicatorClass,
-  resizerClass,
-  selectSingleClass,
-  selectSingleSelectedClass,
-  selectSingleUnselectedClass,
-  dataSheetContainerClass,
-  sortableThClass,
-  sortIconClass,
-  summaryThClass,
-  tableClass,
-  tdClass,
-  thClass,
-  thContentClass,
-  toolbarClass
-} from "./DataSheet.styles";
+import { configButtonClass, defaultContainerClass, expandIndentGuideClass, expandIndentGuideLineClass, expandToggleClass, featureCellBodyClickableClass, featureCellBodyWrapperClass, featureCellClickableClass, featureCellWrapperClass, featureTdClass, featureThClass, fixedClass, fixedLastClass, insetContainerClass, insetTableClass, reorderCellWrapperClass, reorderHandleClass, reorderIndicatorClass, resizeIndicatorClass, resizerClass, selectSingleClass, selectSingleSelectedClass, selectSingleUnselectedClass, dataSheetContainerClass, sortableThClass, sortIconClass, summaryThClass, tableClass, tdClass, thClass, thContentClass, toolbarClass } from "./DataSheet.styles.js";
 const DataSheet = (props) => {
-  const [local] = splitProps(props, [
-    "items",
-    "persistKey",
-    "hideConfigBar",
-    "inset",
-    "contentStyle",
-    "sorts",
-    "onSortsChange",
-    "autoSort",
-    "pageIndex",
-    "onPageIndexChange",
-    "totalPageCount",
-    "itemsPerPage",
-    "displayPageCount",
-    "expandedItems",
-    "onExpandedItemsChange",
-    "getChildren",
-    "selectMode",
-    "selectedItems",
-    "onSelectedItemsChange",
-    "autoSelect",
-    "isItemSelectable",
-    "cellClass",
-    "cellStyle",
-    "onItemsReorder",
-    "class",
-    "children"
-  ]);
+  const [local] = splitProps(props, ["items", "persistKey", "hideConfigBar", "inset", "contentStyle", "sorts", "onSortsChange", "autoSort", "pageIndex", "onPageIndexChange", "totalPageCount", "itemsPerPage", "displayPageCount", "expandedItems", "onExpandedItemsChange", "getChildren", "selectMode", "selectedItems", "onSelectedItemsChange", "autoSelect", "isItemSelectable", "cellClass", "cellStyle", "onItemsReorder", "class", "children"]);
   const modal = useContext(DialogContext);
   const resolved = children(() => local.children);
-  const columnDefs = createMemo(
-    () => resolved.toArray().filter(isDataSheetColumnDef).filter(
-      (col) => !col.hidden
-    )
-  );
-  const [config, setConfig] = local.persistKey != null && local.persistKey !== "" ? usePersisted(`sheet.${local.persistKey}`, { columnRecord: {} }) : createSignal({ columnRecord: {} });
+  const columnDefs = createMemo(() => resolved.toArray().filter(isDataSheetColumnDef).filter((col) => !col.hidden));
+  const [config, setConfig] = local.persistKey != null && local.persistKey !== "" ? useSyncConfig(`sheet.${local.persistKey}`, {
+    columnRecord: {}
+  }) : createSignal({
+    columnRecord: {}
+  });
   const effectiveColumns = createMemo(() => {
     const cols = columnDefs();
     const record = config().columnRecord ?? {};
@@ -115,13 +59,23 @@ const DataSheet = (props) => {
   });
   function saveColumnWidth(colKey, width) {
     const prev = config();
-    const record = { ...prev.columnRecord };
-    record[colKey] = { ...record[colKey], width };
-    setConfig({ ...prev, columnRecord: record });
+    const record = {
+      ...prev.columnRecord
+    };
+    record[colKey] = {
+      ...record[colKey],
+      width
+    };
+    setConfig({
+      ...prev,
+      columnRecord: record
+    });
   }
   async function openConfigModal() {
     if (!modal) return;
-    const { DataSheetConfigDialog } = await import("./DataSheetConfigDialog");
+    const {
+      DataSheetConfigDialog
+    } = await import("./DataSheetConfigDialog");
     const allCols = resolved.toArray().filter(isDataSheetColumnDef);
     const columnInfos = allCols.filter((col) => !col.collapse).map((col) => ({
       key: col.key,
@@ -132,14 +86,14 @@ const DataSheet = (props) => {
       width: col.width
     }));
     const currentConfig = config();
-    const result = await modal.show(
-      () => /* @__PURE__ */ React.createElement(DataSheetConfigDialog, { columnInfos, currentConfig }),
-      {
-        title: "\uC2DC\uD2B8 \uC124\uC815",
-        closeOnBackdrop: true,
-        closeOnEscape: true
-      }
-    );
+    const result = await modal.show(() => _$createComponent(DataSheetConfigDialog, {
+      columnInfos,
+      currentConfig
+    }), {
+      title: "\uC2DC\uD2B8 \uC124\uC815",
+      closeOnBackdrop: true,
+      closeOnEscape: true
+    });
     if (result) {
       setConfig(result);
     }
@@ -155,14 +109,23 @@ const DataSheet = (props) => {
     const existing = current.find((s) => s.key === key);
     if (existing) {
       if (!existing.desc) {
-        const updated = current.map((s) => s.key === key ? { ...s, desc: true } : s);
-        setSorts(multiple ? updated : [{ key, desc: true }]);
+        const updated = current.map((s) => s.key === key ? {
+          ...s,
+          desc: true
+        } : s);
+        setSorts(multiple ? updated : [{
+          key,
+          desc: true
+        }]);
       } else {
         const updated = current.filter((s) => s.key !== key);
         setSorts(multiple ? updated : []);
       }
     } else {
-      const newSort = { key, desc: false };
+      const newSort = {
+        key,
+        desc: false
+      };
       setSorts(multiple ? [...current, newSort] : [newSort]);
     }
   }
@@ -301,7 +264,9 @@ const DataSheet = (props) => {
         const newWidth = Math.max(30, startWidth + delta);
         saveColumnWidth(colKey, `${newWidth}px`);
       }
-      setResizeIndicatorStyle({ display: "none" });
+      setResizeIndicatorStyle({
+        display: "none"
+      });
       target.removeEventListener("pointermove", onPointerMove);
       target.removeEventListener("pointerup", onPointerUp);
     };
@@ -425,7 +390,11 @@ const DataSheet = (props) => {
     const tableEl = target.closest("table");
     const tbody = tableEl.querySelector("tbody");
     const rows = Array.from(tbody.rows);
-    setDragState({ draggingItem: item, targetItem: null, position: null });
+    setDragState({
+      draggingItem: item,
+      targetItem: null,
+      position: null
+    });
     const onPointerMove = (ev) => {
       var _a;
       let foundTarget = null;
@@ -450,7 +419,11 @@ const DataSheet = (props) => {
         foundTarget = flat.item;
         break;
       }
-      setDragState({ draggingItem: item, targetItem: foundTarget, position: foundPosition });
+      setDragState({
+        draggingItem: item,
+        targetItem: foundTarget,
+        position: foundPosition
+      });
       for (let i = 0; i < rows.length; i++) {
         rows[i].removeAttribute("data-dragging");
         rows[i].removeAttribute("data-drag-over");
@@ -543,364 +516,607 @@ const DataSheet = (props) => {
     const allExpandable = collectAllExpandable(pagedItems(), local.getChildren);
     return allExpandable.length > 0 && allExpandable.every((item) => expandedItems().includes(item));
   });
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      "data-sheet": local.persistKey ?? "",
-      class: twMerge("flex flex-col", local.inset ? insetContainerClass : defaultContainerClass, local.class)
-    },
-    /* @__PURE__ */ React.createElement(Show, { when: !local.hideConfigBar && (modal != null || effectivePageCount() > 1) }, /* @__PURE__ */ React.createElement("div", { class: toolbarClass }, /* @__PURE__ */ React.createElement(Show, { when: effectivePageCount() > 1 }, /* @__PURE__ */ React.createElement(
-      Pagination,
-      {
-        pageIndex: currentPage(),
-        onPageIndexChange: setCurrentPage,
-        totalPageCount: effectivePageCount(),
-        displayPageCount: local.displayPageCount,
-        size: "sm"
-      }
-    )), /* @__PURE__ */ React.createElement("div", { class: "flex-1" }), /* @__PURE__ */ React.createElement(Show, { when: modal != null }, /* @__PURE__ */ React.createElement("button", { class: configButtonClass, onClick: openConfigModal, title: "\uC2DC\uD2B8 \uC124\uC815", type: "button" }, /* @__PURE__ */ React.createElement(Icon, { icon: IconSettings, size: "1em" }))))),
-    /* @__PURE__ */ React.createElement("div", { "data-sheet-scroll": true, class: twMerge(dataSheetContainerClass, "flex-1 min-h-0"), style: local.contentStyle }, /* @__PURE__ */ React.createElement(
-      "table",
-      {
-        class: twMerge(tableClass, local.inset ? insetTableClass : void 0),
-        onKeyDown: onTableKeyDown,
-        onPointerDown: (e) => {
-          if (e.shiftKey && hasSelectFeature()) {
-            e.preventDefault();
+  return (() => {
+    var _el$ = _tmpl$5(), _el$5 = _el$.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$1 = _el$7.nextSibling, _el$11 = _el$1.nextSibling, _el$12 = _el$6.nextSibling, _el$13 = _el$12.nextSibling;
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!!local.hideConfigBar)() && (modal != null || effectivePageCount() > 1);
+      },
+      get children() {
+        var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild;
+        _$className(_el$2, toolbarClass);
+        _$insert(_el$2, _$createComponent(Show, {
+          get when() {
+            return effectivePageCount() > 1;
+          },
+          get children() {
+            return _$createComponent(Pagination, {
+              get pageIndex() {
+                return currentPage();
+              },
+              onPageIndexChange: setCurrentPage,
+              get totalPageCount() {
+                return effectivePageCount();
+              },
+              get displayPageCount() {
+                return local.displayPageCount;
+              },
+              size: "sm"
+            });
           }
-        }
+        }), _el$3);
+        _$insert(_el$2, _$createComponent(Show, {
+          when: modal != null,
+          get children() {
+            var _el$4 = _tmpl$();
+            _el$4.$$click = openConfigModal;
+            _$className(_el$4, configButtonClass);
+            _$insert(_el$4, _$createComponent(Icon, {
+              icon: IconSettings,
+              size: "1em"
+            }));
+            return _el$4;
+          }
+        }), null);
+        return _el$2;
+      }
+    }), _el$5);
+    _el$6.$$pointerdown = (e) => {
+      if (e.shiftKey && hasSelectFeature()) {
+        e.preventDefault();
+      }
+    };
+    _el$6.$$keydown = onTableKeyDown;
+    _$insert(_el$7, _$createComponent(Show, {
+      get when() {
+        return hasExpandFeature();
+      },
+      get children() {
+        return _tmpl$3();
+      }
+    }), null);
+    _$insert(_el$7, _$createComponent(Show, {
+      get when() {
+        return hasSelectFeature();
+      },
+      get children() {
+        return _tmpl$3();
+      }
+    }), null);
+    _$insert(_el$7, _$createComponent(Show, {
+      get when() {
+        return hasReorderFeature();
+      },
+      get children() {
+        return _tmpl$3();
+      }
+    }), null);
+    _$insert(_el$7, _$createComponent(For, {
+      get each() {
+        return effectiveColumns();
+      },
+      children: (col) => (() => {
+        var _el$14 = _tmpl$3();
+        _$effect((_$p) => _$style(_el$14, col.width != null ? {
+          width: col.width
+        } : void 0, _$p));
+        return _el$14;
+      })()
+    }), null);
+    _$insert(_el$1, _$createComponent(For, {
+      get each() {
+        return headerTable();
       },
-      /* @__PURE__ */ React.createElement("colgroup", null, /* @__PURE__ */ React.createElement(Show, { when: hasExpandFeature() }, /* @__PURE__ */ React.createElement("col", null)), /* @__PURE__ */ React.createElement(Show, { when: hasSelectFeature() }, /* @__PURE__ */ React.createElement("col", null)), /* @__PURE__ */ React.createElement(Show, { when: hasReorderFeature() }, /* @__PURE__ */ React.createElement("col", null)), /* @__PURE__ */ React.createElement(For, { each: effectiveColumns() }, (col) => /* @__PURE__ */ React.createElement("col", { style: col.width != null ? { width: col.width } : void 0 }))),
-      /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement(For, { each: headerTable() }, (row, rowIndex) => /* @__PURE__ */ React.createElement("tr", { ref: (el) => registerHeaderRow(rowIndex(), el) }, /* @__PURE__ */ React.createElement(Show, { when: hasExpandFeature() && rowIndex() === 0 }, /* @__PURE__ */ React.createElement(
-        "th",
-        {
-          class: twMerge(
-            featureThClass,
-            fixedClass,
-            "z-[5]",
-            isExpandColLastFixed() ? fixedLastClass : void 0
-          ),
-          rowspan: featureHeaderRowspan(),
-          style: { top: "0", left: "0" },
-          ref: registerExpandColRef
-        },
-        /* @__PURE__ */ React.createElement("div", { class: featureCellWrapperClass }, /* @__PURE__ */ React.createElement(
-          "button",
-          {
-            type: "button",
-            class: expandToggleClass,
-            onClick: toggleExpandAll,
-            title: isAllExpanded() ? "\uC804\uCCB4 \uC811\uAE30" : "\uC804\uCCB4 \uD3BC\uCE58\uAE30"
+      children: (row, rowIndex) => (() => {
+        var _el$15 = _tmpl$4();
+        _$use((el) => registerHeaderRow(rowIndex(), el), _el$15);
+        _$insert(_el$15, _$createComponent(Show, {
+          get when() {
+            return _$memo(() => !!hasExpandFeature())() && rowIndex() === 0;
           },
-          /* @__PURE__ */ React.createElement(
-            Icon,
-            {
+          get children() {
+            var _el$16 = _tmpl$6(), _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild;
+            _$use(registerExpandColRef, _el$16);
+            _$className(_el$17, featureCellWrapperClass);
+            _el$18.$$click = toggleExpandAll;
+            _$className(_el$18, expandToggleClass);
+            _$insert(_el$18, _$createComponent(Icon, {
               icon: IconChevronDown,
               size: "1em",
-              class: clsx("transition-transform", isAllExpanded() ? "rotate-0" : "-rotate-90")
-            }
-          )
-        ))
-      )), /* @__PURE__ */ React.createElement(Show, { when: hasSelectFeature() && rowIndex() === 0 }, /* @__PURE__ */ React.createElement(
-        "th",
-        {
-          class: twMerge(
-            featureThClass,
-            fixedClass,
-            "z-[5]",
-            isSelectColLastFixed() ? fixedLastClass : void 0
-          ),
-          rowspan: featureHeaderRowspan(),
-          style: {
-            top: "0",
-            left: selectColLeft()
+              get ["class"]() {
+                return clsx("transition-transform", isAllExpanded() ? "rotate-0" : "-rotate-90");
+              }
+            }));
+            _$effect((_p$) => {
+              var _v$7 = twMerge(featureThClass, fixedClass, "z-[5]", isExpandColLastFixed() ? fixedLastClass : void 0), _v$8 = featureHeaderRowspan(), _v$9 = isAllExpanded() ? "\uC804\uCCB4 \uC811\uAE30" : "\uC804\uCCB4 \uD3BC\uCE58\uAE30";
+              _v$7 !== _p$.e && _$className(_el$16, _p$.e = _v$7);
+              _v$8 !== _p$.t && _$setAttribute(_el$16, "rowspan", _p$.t = _v$8);
+              _v$9 !== _p$.a && _$setAttribute(_el$18, "title", _p$.a = _v$9);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0
+            });
+            return _el$16;
+          }
+        }), null);
+        _$insert(_el$15, _$createComponent(Show, {
+          get when() {
+            return _$memo(() => !!hasSelectFeature())() && rowIndex() === 0;
           },
-          ref: registerSelectColRef
-        },
-        /* @__PURE__ */ React.createElement(Show, { when: local.selectMode === "multiple" }, /* @__PURE__ */ React.createElement("div", { class: featureCellClickableClass, onClick: () => toggleSelectAll() }, /* @__PURE__ */ React.createElement(
-          Checkbox,
-          {
-            value: (() => {
-              const selectableItems = displayItems().map((flat) => flat.item).filter((item) => getItemSelectable(item) === true);
-              return selectableItems.length > 0 && selectableItems.every((item) => selectedItems().includes(item));
-            })(),
-            inset: true,
-            class: "pointer-events-none"
+          get children() {
+            var _el$19 = _tmpl$8();
+            _$use(registerSelectColRef, _el$19);
+            _$insert(_el$19, _$createComponent(Show, {
+              get when() {
+                return local.selectMode === "multiple";
+              },
+              get children() {
+                var _el$20 = _tmpl$7();
+                _el$20.$$click = () => toggleSelectAll();
+                _$className(_el$20, featureCellClickableClass);
+                _$insert(_el$20, _$createComponent(Checkbox, {
+                  get value() {
+                    const selectableItems = displayItems().map((flat) => flat.item).filter((item) => getItemSelectable(item) === true);
+                    return selectableItems.length > 0 && selectableItems.every((item) => selectedItems().includes(item));
+                  },
+                  inset: true,
+                  "class": "pointer-events-none"
+                }));
+                return _el$20;
+              }
+            }));
+            _$effect((_p$) => {
+              var _v$0 = twMerge(featureThClass, fixedClass, "z-[5]", isSelectColLastFixed() ? fixedLastClass : void 0), _v$1 = featureHeaderRowspan(), _v$10 = selectColLeft();
+              _v$0 !== _p$.e && _$className(_el$19, _p$.e = _v$0);
+              _v$1 !== _p$.t && _$setAttribute(_el$19, "rowspan", _p$.t = _v$1);
+              _v$10 !== _p$.a && _$setStyleProperty(_el$19, "left", _p$.a = _v$10);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0
+            });
+            return _el$19;
           }
-        )))
-      )), /* @__PURE__ */ React.createElement(Show, { when: hasReorderFeature() && rowIndex() === 0 }, /* @__PURE__ */ React.createElement(
-        "th",
-        {
-          class: twMerge(
-            featureThClass,
-            fixedClass,
-            "z-[5]",
-            isReorderColLastFixed() ? fixedLastClass : void 0
-          ),
-          rowspan: featureHeaderRowspan(),
-          style: {
-            top: "0",
-            left: reorderColLeft()
+        }), null);
+        _$insert(_el$15, _$createComponent(Show, {
+          get when() {
+            return _$memo(() => !!hasReorderFeature())() && rowIndex() === 0;
           },
-          ref: registerReorderColRef
-        }
-      )), /* @__PURE__ */ React.createElement(For, { each: row }, (cell, cellColIndex) => /* @__PURE__ */ React.createElement(Show, { when: cell }, (c) => {
-        var _a, _b;
-        const isSortable = () => c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex].sortable;
-        const colKey = () => c().colIndex != null ? effectiveColumns()[c().colIndex].key : void 0;
-        const isGroupFixed = () => {
-          if (c().isLastRow) return false;
-          const start = cellColIndex();
-          const span = c().colspan;
-          const cols = effectiveColumns();
-          for (let i = start; i < start + span && i < cols.length; i++) {
-            if (!cols[i].fixed) return false;
+          get children() {
+            var _el$21 = _tmpl$8();
+            _$use(registerReorderColRef, _el$21);
+            _$effect((_p$) => {
+              var _v$11 = twMerge(featureThClass, fixedClass, "z-[5]", isReorderColLastFixed() ? fixedLastClass : void 0), _v$12 = featureHeaderRowspan(), _v$13 = reorderColLeft();
+              _v$11 !== _p$.e && _$className(_el$21, _p$.e = _v$11);
+              _v$12 !== _p$.t && _$setAttribute(_el$21, "rowspan", _p$.t = _v$12);
+              _v$13 !== _p$.a && _$setStyleProperty(_el$21, "left", _p$.a = _v$13);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0
+            });
+            return _el$21;
           }
-          return true;
-        };
-        const isCellFixed = () => c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex].fixed || isGroupFixed();
-        const isCellLastFixed = () => {
-          if (c().isLastRow && c().colIndex != null) return isLastFixed(c().colIndex);
-          if (isGroupFixed()) {
-            const lastCol = cellColIndex() + c().colspan - 1;
-            return isLastFixed(lastCol);
+        }), null);
+        _$insert(_el$15, _$createComponent(For, {
+          each: row,
+          children: (cell, cellColIndex) => _$createComponent(Show, {
+            when: cell,
+            children: (c) => {
+              const isSortable = () => c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex].sortable;
+              const colKey = () => c().colIndex != null ? effectiveColumns()[c().colIndex].key : void 0;
+              const isGroupFixed = () => {
+                if (c().isLastRow) return false;
+                const start = cellColIndex();
+                const span = c().colspan;
+                const cols = effectiveColumns();
+                for (let i = start; i < start + span && i < cols.length; i++) {
+                  if (!cols[i].fixed) return false;
+                }
+                return true;
+              };
+              const isCellFixed = () => c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex].fixed || isGroupFixed();
+              const isCellLastFixed = () => {
+                if (c().isLastRow && c().colIndex != null) return isLastFixed(c().colIndex);
+                if (isGroupFixed()) {
+                  const lastCol = cellColIndex() + c().colspan - 1;
+                  return isLastFixed(lastCol);
+                }
+                return false;
+              };
+              const cellStyle = () => {
+                const parts = [];
+                const top = headerRowTops()[rowIndex()];
+                parts.push(`top: ${top}px`);
+                if (c().isLastRow && c().colIndex != null) {
+                  const left = getFixedStyle(c().colIndex);
+                  if (left != null) parts.push(left);
+                  const col = effectiveColumns()[c().colIndex];
+                  if (col.width != null) parts.push(`max-width: ${col.width}`);
+                } else if (isGroupFixed()) {
+                  const left = getFixedStyle(cellColIndex());
+                  if (left != null) parts.push(left);
+                }
+                return parts.length > 0 ? parts.join("; ") : void 0;
+              };
+              return (() => {
+                var _el$22 = _tmpl$9(), _el$23 = _el$22.firstChild, _el$24 = _el$23.firstChild;
+                _el$22.$$click = (e) => {
+                  if (!isSortable()) return;
+                  const key = colKey();
+                  if (key == null) return;
+                  toggleSort(key, e.shiftKey || e.ctrlKey);
+                };
+                _$use((el) => {
+                  if (c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex].fixed) {
+                    registerColumnRef(c().colIndex, el);
+                  }
+                }, _el$22);
+                _$insert(_el$24, () => {
+                  var _a, _b;
+                  return ((_b = (_a = c()).headerContent) == null ? void 0 : _b.call(_a)) ?? c().text;
+                });
+                _$insert(_el$23, _$createComponent(Show, {
+                  get when() {
+                    return _$memo(() => !!isSortable())() && colKey();
+                  },
+                  children: (key) => {
+                    const sortDef = () => getSortDef(key());
+                    const sortIndex = () => getSortIndex(key());
+                    return (() => {
+                      var _el$26 = _tmpl$7();
+                      _$className(_el$26, sortIconClass);
+                      _$insert(_el$26, _$createComponent(Show, {
+                        get when() {
+                          var _a;
+                          return ((_a = sortDef()) == null ? void 0 : _a.desc) === false;
+                        },
+                        get children() {
+                          return _$createComponent(Icon, {
+                            icon: IconSortAscending,
+                            size: "1em"
+                          });
+                        }
+                      }), null);
+                      _$insert(_el$26, _$createComponent(Show, {
+                        get when() {
+                          var _a;
+                          return ((_a = sortDef()) == null ? void 0 : _a.desc) === true;
+                        },
+                        get children() {
+                          return _$createComponent(Icon, {
+                            icon: IconSortDescending,
+                            size: "1em"
+                          });
+                        }
+                      }), null);
+                      _$insert(_el$26, _$createComponent(Show, {
+                        get when() {
+                          return sortDef() == null;
+                        },
+                        get children() {
+                          return _$createComponent(Icon, {
+                            icon: IconArrowsSort,
+                            size: "1em",
+                            "class": "opacity-30"
+                          });
+                        }
+                      }), null);
+                      _$insert(_el$26, _$createComponent(Show, {
+                        get when() {
+                          return sortIndex();
+                        },
+                        children: (idx) => (() => {
+                          var _el$27 = _tmpl$0();
+                          _$insert(_el$27, idx);
+                          return _el$27;
+                        })()
+                      }), null);
+                      return _el$26;
+                    })();
+                  }
+                }), null);
+                _$insert(_el$22, _$createComponent(Show, {
+                  get when() {
+                    return _$memo(() => !!(c().isLastRow && c().colIndex != null))() && effectiveColumns()[c().colIndex].resizable;
+                  },
+                  get children() {
+                    var _el$25 = _tmpl$7();
+                    _el$25.$$dblclick = (e) => {
+                      e.stopPropagation();
+                      onResizerDoubleClick(effectiveColumns()[c().colIndex].key);
+                    };
+                    _el$25.$$pointerdown = (e) => onResizerPointerdown(e, effectiveColumns()[c().colIndex].key);
+                    _el$25.$$click = (e) => e.stopPropagation();
+                    _$className(_el$25, resizerClass);
+                    return _el$25;
+                  }
+                }), null);
+                _$effect((_p$) => {
+                  var _v$14 = twMerge(thClass, fixedClass, isSortable() ? sortableThClass : void 0, isCellFixed() ? "z-[5]" : "z-[3]", isCellLastFixed() ? fixedLastClass : void 0), _v$15 = c().colspan > 1 ? c().colspan : void 0, _v$16 = c().rowspan > 1 ? c().rowspan : void 0, _v$17 = cellStyle(), _v$18 = c().isLastRow && c().colIndex != null ? effectiveColumns()[c().colIndex].tooltip ?? c().text : c().text, _v$19 = clsx("flex items-center", thContentClass);
+                  _v$14 !== _p$.e && _$className(_el$22, _p$.e = _v$14);
+                  _v$15 !== _p$.t && _$setAttribute(_el$22, "colspan", _p$.t = _v$15);
+                  _v$16 !== _p$.a && _$setAttribute(_el$22, "rowspan", _p$.a = _v$16);
+                  _p$.o = _$style(_el$22, _v$17, _p$.o);
+                  _v$18 !== _p$.i && _$setAttribute(_el$22, "title", _p$.i = _v$18);
+                  _v$19 !== _p$.n && _$className(_el$23, _p$.n = _v$19);
+                  return _p$;
+                }, {
+                  e: void 0,
+                  t: void 0,
+                  a: void 0,
+                  o: void 0,
+                  i: void 0,
+                  n: void 0
+                });
+                return _el$22;
+              })();
+            }
+          })
+        }), null);
+        return _el$15;
+      })()
+    }), null);
+    _$insert(_el$1, _$createComponent(Show, {
+      get when() {
+        return hasSummary();
+      },
+      get children() {
+        var _el$10 = _tmpl$4();
+        _$insert(_el$10, _$createComponent(For, {
+          get each() {
+            return effectiveColumns();
+          },
+          children: (col, colIndex) => {
+            const summaryStyle = () => {
+              const parts = [];
+              parts.push(`top: ${summaryRowTop()}px`);
+              const left = getFixedStyle(colIndex());
+              if (left != null) parts.push(left);
+              return parts.join("; ");
+            };
+            return (() => {
+              var _el$28 = _tmpl$1(), _el$29 = _el$28.firstChild;
+              _$className(_el$29, thContentClass);
+              _$insert(_el$29, () => {
+                var _a;
+                return (_a = col.summary) == null ? void 0 : _a.call(col);
+              });
+              _$effect((_p$) => {
+                var _v$20 = twMerge(thClass, summaryThClass, fixedClass, col.fixed ? "z-[5]" : "z-[3]", isLastFixed(colIndex()) ? fixedLastClass : void 0), _v$21 = summaryStyle();
+                _v$20 !== _p$.e && _$className(_el$28, _p$.e = _v$20);
+                _p$.t = _$style(_el$28, _v$21, _p$.t);
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0
+              });
+              return _el$28;
+            })();
           }
-          return false;
-        };
-        const cellStyle = () => {
-          const parts = [];
-          const top = headerRowTops()[rowIndex()];
-          parts.push(`top: ${top}px`);
-          if (c().isLastRow && c().colIndex != null) {
-            const left = getFixedStyle(c().colIndex);
-            if (left != null) parts.push(left);
-            const col = effectiveColumns()[c().colIndex];
-            if (col.width != null) parts.push(`max-width: ${col.width}`);
-          } else if (isGroupFixed()) {
-            const left = getFixedStyle(cellColIndex());
-            if (left != null) parts.push(left);
+        }));
+        return _el$10;
+      }
+    }), null);
+    _$insert(_el$11, _$createComponent(For, {
+      get each() {
+        return displayItems();
+      },
+      children: (flat) => (() => {
+        var _el$30 = _tmpl$4();
+        _el$30.$$click = () => {
+          if (local.autoSelect === "click") {
+            selectItem(flat.item);
           }
-          return parts.length > 0 ? parts.join("; ") : void 0;
         };
-        return /* @__PURE__ */ React.createElement(
-          "th",
-          {
-            class: twMerge(
-              thClass,
-              fixedClass,
-              isSortable() ? sortableThClass : void 0,
-              isCellFixed() ? "z-[5]" : "z-[3]",
-              isCellLastFixed() ? fixedLastClass : void 0
-            ),
-            colspan: c().colspan > 1 ? c().colspan : void 0,
-            rowspan: c().rowspan > 1 ? c().rowspan : void 0,
-            style: cellStyle(),
-            title: c().isLastRow && c().colIndex != null ? effectiveColumns()[c().colIndex].tooltip ?? c().text : c().text,
-            ref: (el) => {
-              if (c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex].fixed) {
-                registerColumnRef(c().colIndex, el);
-              }
-            },
-            onClick: (e) => {
-              if (!isSortable()) return;
-              const key = colKey();
-              if (key == null) return;
-              toggleSort(key, e.shiftKey || e.ctrlKey);
-            }
+        _$insert(_el$30, _$createComponent(Show, {
+          get when() {
+            return hasExpandFeature();
           },
-          /* @__PURE__ */ React.createElement("div", { class: clsx("flex items-center", thContentClass) }, /* @__PURE__ */ React.createElement("div", { class: "flex-1" }, ((_b = (_a = c()).headerContent) == null ? void 0 : _b.call(_a)) ?? c().text), /* @__PURE__ */ React.createElement(Show, { when: isSortable() && colKey() }, (key) => {
-            var _a2, _b2;
-            const sortDef = () => getSortDef(key());
-            const sortIndex = () => getSortIndex(key());
-            return /* @__PURE__ */ React.createElement("div", { class: sortIconClass }, /* @__PURE__ */ React.createElement(Show, { when: ((_a2 = sortDef()) == null ? void 0 : _a2.desc) === false }, /* @__PURE__ */ React.createElement(Icon, { icon: IconSortAscending, size: "1em" })), /* @__PURE__ */ React.createElement(Show, { when: ((_b2 = sortDef()) == null ? void 0 : _b2.desc) === true }, /* @__PURE__ */ React.createElement(Icon, { icon: IconSortDescending, size: "1em" })), /* @__PURE__ */ React.createElement(Show, { when: sortDef() == null }, /* @__PURE__ */ React.createElement(Icon, { icon: IconArrowsSort, size: "1em", class: "opacity-30" })), /* @__PURE__ */ React.createElement(Show, { when: sortIndex() }, (idx) => /* @__PURE__ */ React.createElement("sub", null, idx())));
-          })),
-          /* @__PURE__ */ React.createElement(
-            Show,
-            {
-              when: c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex].resizable
-            },
-            /* @__PURE__ */ React.createElement(
-              "div",
-              {
-                class: resizerClass,
-                onClick: (e) => e.stopPropagation(),
-                onPointerDown: (e) => onResizerPointerdown(e, effectiveColumns()[c().colIndex].key),
-                onDblClick: (e) => {
-                  e.stopPropagation();
-                  onResizerDoubleClick(effectiveColumns()[c().colIndex].key);
-                }
+          get children() {
+            var _el$31 = _tmpl$11(), _el$32 = _el$31.firstChild;
+            _$className(_el$32, featureCellBodyWrapperClass);
+            _$insert(_el$32, _$createComponent(For, {
+              get each() {
+                return Array.from({
+                  length: flat.depth
+                });
+              },
+              children: () => (() => {
+                var _el$37 = _tmpl$13(), _el$38 = _el$37.firstChild;
+                _$className(_el$37, expandIndentGuideClass);
+                _$className(_el$38, expandIndentGuideLineClass);
+                return _el$37;
+              })()
+            }), null);
+            _$insert(_el$32, _$createComponent(Show, {
+              get when() {
+                return flat.hasChildren;
+              },
+              get children() {
+                var _el$33 = _tmpl$10();
+                _el$33.$$click = () => toggleExpand(flat.item);
+                _$className(_el$33, expandToggleClass);
+                _$insert(_el$33, _$createComponent(Icon, {
+                  icon: IconChevronDown,
+                  size: "1em",
+                  get ["class"]() {
+                    return clsx("transition-transform", expandedItems().includes(flat.item) ? "rotate-0" : "-rotate-90");
+                  }
+                }));
+                return _el$33;
               }
-            )
-          )
-        );
-      })))), /* @__PURE__ */ React.createElement(Show, { when: hasSummary() }, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement(For, { each: effectiveColumns() }, (col, colIndex) => {
-        var _a;
-        const summaryStyle = () => {
-          const parts = [];
-          parts.push(`top: ${summaryRowTop()}px`);
-          const left = getFixedStyle(colIndex());
-          if (left != null) parts.push(left);
-          return parts.join("; ");
-        };
-        return /* @__PURE__ */ React.createElement(
-          "th",
-          {
-            class: twMerge(
-              thClass,
-              summaryThClass,
-              fixedClass,
-              col.fixed ? "z-[5]" : "z-[3]",
-              isLastFixed(colIndex()) ? fixedLastClass : void 0
-            ),
-            style: summaryStyle()
-          },
-          /* @__PURE__ */ React.createElement("div", { class: thContentClass }, (_a = col.summary) == null ? void 0 : _a.call(col))
-        );
-      })))),
-      /* @__PURE__ */ React.createElement("tbody", null, /* @__PURE__ */ React.createElement(For, { each: displayItems() }, (flat) => /* @__PURE__ */ React.createElement(
-        "tr",
-        {
-          "data-selected": selectedItems().includes(flat.item) ? "" : void 0,
-          onClick: () => {
-            if (local.autoSelect === "click") {
-              selectItem(flat.item);
-            }
-          },
-          class: local.autoSelect === "click" ? "cursor-pointer" : void 0
-        },
-        /* @__PURE__ */ React.createElement(Show, { when: hasExpandFeature() }, /* @__PURE__ */ React.createElement(
-          "td",
-          {
-            class: twMerge(
-              featureTdClass,
-              fixedClass,
-              "z-[2]",
-              isExpandColLastFixed() ? fixedLastClass : void 0
-            ),
-            style: { left: "0" }
+            }), null);
+            _$effect(() => _$className(_el$31, twMerge(featureTdClass, fixedClass, "z-[2]", isExpandColLastFixed() ? fixedLastClass : void 0)));
+            return _el$31;
+          }
+        }), null);
+        _$insert(_el$30, _$createComponent(Show, {
+          get when() {
+            return hasSelectFeature();
           },
-          /* @__PURE__ */ React.createElement("div", { class: featureCellBodyWrapperClass }, /* @__PURE__ */ React.createElement(For, { each: Array.from({ length: flat.depth }) }, () => /* @__PURE__ */ React.createElement("div", { class: expandIndentGuideClass }, /* @__PURE__ */ React.createElement("div", { class: expandIndentGuideLineClass }))), /* @__PURE__ */ React.createElement(Show, { when: flat.hasChildren }, /* @__PURE__ */ React.createElement("button", { type: "button", class: expandToggleClass, onClick: () => toggleExpand(flat.item) }, /* @__PURE__ */ React.createElement(
-            Icon,
-            {
-              icon: IconChevronDown,
-              size: "1em",
-              class: clsx(
-                "transition-transform",
-                expandedItems().includes(flat.item) ? "rotate-0" : "-rotate-90"
-              )
-            }
-          ))))
-        )),
-        /* @__PURE__ */ React.createElement(Show, { when: hasSelectFeature() }, (() => {
-          const selectable = () => getItemSelectable(flat.item);
-          const isSelected = () => selectedItems().includes(flat.item);
-          const rowIndex = () => displayItems().indexOf(flat);
-          return /* @__PURE__ */ React.createElement(
-            "td",
-            {
-              class: twMerge(
-                featureTdClass,
-                fixedClass,
-                "z-[2]",
-                isSelectColLastFixed() ? fixedLastClass : void 0
-              ),
-              style: {
-                left: selectColLeft()
-              }
-            },
-            /* @__PURE__ */ React.createElement(
-              Show,
-              {
-                when: local.selectMode === "multiple",
-                fallback: (
-                  /* single 모드 */
-                  /* @__PURE__ */ React.createElement(Show, { when: selectable() === true }, /* @__PURE__ */ React.createElement("div", { class: featureCellBodyClickableClass, onClick: () => toggleSelect(flat.item) }, /* @__PURE__ */ React.createElement(
-                    "div",
-                    {
-                      class: twMerge(
-                        selectSingleClass,
-                        isSelected() ? selectSingleSelectedClass : selectSingleUnselectedClass
-                      )
-                    },
-                    /* @__PURE__ */ React.createElement(Icon, { icon: IconChevronRight, size: "1em" })
-                  )))
-                )
-              },
-              /* @__PURE__ */ React.createElement(
-                "div",
-                {
-                  class: featureCellBodyClickableClass,
-                  onClick: (e) => {
-                    if (e.shiftKey) {
-                      rangeSelect(rowIndex());
-                    } else {
-                      toggleSelect(flat.item);
-                    }
-                    setLastClickedRow(rowIndex());
+          get children() {
+            return (() => {
+              const selectable = () => getItemSelectable(flat.item);
+              const isSelected = () => selectedItems().includes(flat.item);
+              const rowIndex = () => displayItems().indexOf(flat);
+              return (() => {
+                var _el$39 = _tmpl$14();
+                _$insert(_el$39, _$createComponent(Show, {
+                  get when() {
+                    return local.selectMode === "multiple";
+                  },
+                  get fallback() {
+                    return (
+                      /* single 모드 */
+                      _$createComponent(Show, {
+                        get when() {
+                          return selectable() === true;
+                        },
+                        get children() {
+                          var _el$41 = _tmpl$13(), _el$42 = _el$41.firstChild;
+                          _el$41.$$click = () => toggleSelect(flat.item);
+                          _$className(_el$41, featureCellBodyClickableClass);
+                          _$insert(_el$42, _$createComponent(Icon, {
+                            icon: IconChevronRight,
+                            size: "1em"
+                          }));
+                          _$effect(() => _$className(_el$42, twMerge(selectSingleClass, isSelected() ? selectSingleSelectedClass : selectSingleUnselectedClass)));
+                          return _el$41;
+                        }
+                      })
+                    );
                   },
-                  title: typeof selectable() === "string" ? selectable() : void 0
-                },
-                /* @__PURE__ */ React.createElement(
-                  Checkbox,
-                  {
-                    value: isSelected(),
-                    disabled: selectable() !== true,
-                    inset: true,
-                    class: twMerge(
-                      "pointer-events-none",
-                      lastClickedRow() === rowIndex() ? "[&>div]:ring-2 [&>div]:ring-primary-200 dark:[&>div]:ring-primary-700" : void 0
-                    )
+                  get children() {
+                    var _el$40 = _tmpl$7();
+                    _el$40.$$click = (e) => {
+                      if (e.shiftKey) {
+                        rangeSelect(rowIndex());
+                      } else {
+                        toggleSelect(flat.item);
+                      }
+                      setLastClickedRow(rowIndex());
+                    };
+                    _$className(_el$40, featureCellBodyClickableClass);
+                    _$insert(_el$40, _$createComponent(Checkbox, {
+                      get value() {
+                        return isSelected();
+                      },
+                      get disabled() {
+                        return selectable() !== true;
+                      },
+                      inset: true,
+                      get ["class"]() {
+                        return twMerge("pointer-events-none", lastClickedRow() === rowIndex() ? "[&>div]:ring-2 [&>div]:ring-primary-200 dark:[&>div]:ring-primary-700" : void 0);
+                      }
+                    }));
+                    _$effect(() => _$setAttribute(_el$40, "title", typeof selectable() === "string" ? selectable() : void 0));
+                    return _el$40;
                   }
-                )
-              )
-            )
-          );
-        })()),
-        /* @__PURE__ */ React.createElement(Show, { when: hasReorderFeature() }, /* @__PURE__ */ React.createElement(
-          "td",
-          {
-            class: twMerge(
-              featureTdClass,
-              fixedClass,
-              "z-[2]",
-              isReorderColLastFixed() ? fixedLastClass : void 0
-            ),
-            style: {
-              left: reorderColLeft()
-            }
+                }));
+                _$effect((_p$) => {
+                  var _v$26 = twMerge(featureTdClass, fixedClass, "z-[2]", isSelectColLastFixed() ? fixedLastClass : void 0), _v$27 = selectColLeft();
+                  _v$26 !== _p$.e && _$className(_el$39, _p$.e = _v$26);
+                  _v$27 !== _p$.t && _$setStyleProperty(_el$39, "left", _p$.t = _v$27);
+                  return _p$;
+                }, {
+                  e: void 0,
+                  t: void 0
+                });
+                return _el$39;
+              })();
+            })();
+          }
+        }), null);
+        _$insert(_el$30, _$createComponent(Show, {
+          get when() {
+            return hasReorderFeature();
           },
-          /* @__PURE__ */ React.createElement("div", { class: reorderCellWrapperClass, onPointerDown: (e) => onReorderPointerDown(e, flat.item) }, /* @__PURE__ */ React.createElement("div", { class: reorderHandleClass }, /* @__PURE__ */ React.createElement(Icon, { icon: IconGripVertical, size: "1em" })))
-        )),
-        /* @__PURE__ */ React.createElement(For, { each: effectiveColumns() }, (col, colIndex) => {
-          var _a, _b;
-          return /* @__PURE__ */ React.createElement(
-            "td",
-            {
-              class: twMerge(
-                tdClass,
-                col.fixed ? clsx(fixedClass, "z-[2]") : void 0,
-                isLastFixed(colIndex()) ? fixedLastClass : void 0,
-                col.class,
-                (_a = local.cellClass) == null ? void 0 : _a.call(local, flat.item, col.key)
-              ),
-              style: [
-                getFixedStyle(colIndex()),
-                col.width != null ? `max-width: ${col.width}` : void 0,
-                (_b = local.cellStyle) == null ? void 0 : _b.call(local, flat.item, col.key)
-              ].filter(Boolean).join("; ") || void 0
-            },
-            col.cell({
+          get children() {
+            var _el$34 = _tmpl$12(), _el$35 = _el$34.firstChild, _el$36 = _el$35.firstChild;
+            _el$35.$$pointerdown = (e) => onReorderPointerDown(e, flat.item);
+            _$className(_el$35, reorderCellWrapperClass);
+            _$className(_el$36, reorderHandleClass);
+            _$insert(_el$36, _$createComponent(Icon, {
+              icon: IconGripVertical,
+              size: "1em"
+            }));
+            _$effect((_p$) => {
+              var _v$22 = twMerge(featureTdClass, fixedClass, "z-[2]", isReorderColLastFixed() ? fixedLastClass : void 0), _v$23 = reorderColLeft();
+              _v$22 !== _p$.e && _$className(_el$34, _p$.e = _v$22);
+              _v$23 !== _p$.t && _$setStyleProperty(_el$34, "left", _p$.t = _v$23);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
+            return _el$34;
+          }
+        }), null);
+        _$insert(_el$30, _$createComponent(For, {
+          get each() {
+            return effectiveColumns();
+          },
+          children: (col, colIndex) => (() => {
+            var _el$43 = _tmpl$14();
+            _$insert(_el$43, () => col.cell({
               item: flat.item,
               index: flat.index,
               depth: flat.depth
-            })
-          );
-        })
-      )))
-    ), /* @__PURE__ */ React.createElement("div", { class: resizeIndicatorClass, style: resizeIndicatorStyle() }), /* @__PURE__ */ React.createElement("div", { "data-reorder-indicator": true, class: reorderIndicatorClass, style: { display: "none" } }))
-  );
+            }));
+            _$effect((_p$) => {
+              var _a, _b;
+              var _v$28 = twMerge(tdClass, col.fixed ? clsx(fixedClass, "z-[2]") : void 0, isLastFixed(colIndex()) ? fixedLastClass : void 0, col.class, (_a = local.cellClass) == null ? void 0 : _a.call(local, flat.item, col.key)), _v$29 = [getFixedStyle(colIndex()), col.width != null ? `max-width: ${col.width}` : void 0, (_b = local.cellStyle) == null ? void 0 : _b.call(local, flat.item, col.key)].filter(Boolean).join("; ") || void 0;
+              _v$28 !== _p$.e && _$className(_el$43, _p$.e = _v$28);
+              _p$.t = _$style(_el$43, _v$29, _p$.t);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
+            return _el$43;
+          })()
+        }), null);
+        _$effect((_p$) => {
+          var _v$24 = selectedItems().includes(flat.item) ? "" : void 0, _v$25 = local.autoSelect === "click" ? "cursor-pointer" : void 0;
+          _v$24 !== _p$.e && _$setAttribute(_el$30, "data-selected", _p$.e = _v$24);
+          _v$25 !== _p$.t && _$className(_el$30, _p$.t = _v$25);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$30;
+      })()
+    }));
+    _$className(_el$12, resizeIndicatorClass);
+    _$className(_el$13, reorderIndicatorClass);
+    _$effect((_p$) => {
+      var _v$ = local.persistKey ?? "", _v$2 = twMerge("flex flex-col", local.inset ? insetContainerClass : defaultContainerClass, local.class), _v$3 = twMerge(dataSheetContainerClass, "flex-1 min-h-0"), _v$4 = local.contentStyle, _v$5 = twMerge(tableClass, local.inset ? insetTableClass : void 0), _v$6 = resizeIndicatorStyle();
+      _v$ !== _p$.e && _$setAttribute(_el$, "data-sheet", _p$.e = _v$);
+      _v$2 !== _p$.t && _$className(_el$, _p$.t = _v$2);
+      _v$3 !== _p$.a && _$className(_el$5, _p$.a = _v$3);
+      _p$.o = _$style(_el$5, _v$4, _p$.o);
+      _v$5 !== _p$.i && _$className(_el$6, _p$.i = _v$5);
+      _p$.n = _$style(_el$12, _v$6, _p$.n);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0
+    });
+    return _el$;
+  })();
 };
 DataSheet.Column = DataSheetColumn;
+_$delegateEvents(["click", "keydown", "pointerdown", "dblclick"]);
 export {
   DataSheet
 };