@simplysm/solid 13.0.75 → 13.0.77

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

@@ -1,40 +1,61 @@
 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 { addEventListener as _$addEventListener } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 import { style as _$style } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } 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="Sheet Settings"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 { className as _$className } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ _$template(`<button type=button>`), _tmpl$2 = /* @__PURE__ */ _$template(`<td style=left:0><div>`), _tmpl$3 = /* @__PURE__ */ _$template(`<div><div>`), _tmpl$4 = /* @__PURE__ */ _$template(`<div>`), _tmpl$5 = /* @__PURE__ */ _$template(`<td>`), _tmpl$6 = /* @__PURE__ */ _$template(`<td><div><div>`), _tmpl$7 = /* @__PURE__ */ _$template(`<tr>`), _tmpl$8 = /* @__PURE__ */ _$template(`<th><div>`), _tmpl$9 = /* @__PURE__ */ _$template(`<button title="Sheet Settings"type=button>`), _tmpl$0 = /* @__PURE__ */ _$template(`<div><div class=flex-1>`), _tmpl$1 = /* @__PURE__ */ _$template(`<col>`), _tmpl$10 = /* @__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$11 = /* @__PURE__ */ _$template(`<th style=top:0;left:0><div><button type=button>`), _tmpl$12 = /* @__PURE__ */ _$template(`<th style=top:0>`);
+import { 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 { IconChevronDown, IconChevronRight, IconGripVertical, IconSettings } from "@tabler/icons-solidjs";
 import "@simplysm/core-browser";
-import { isDataSheetColumnDef, DataSheetColumn } from "./DataSheetColumn.js";
-import { applySorting, buildHeaderTable, collectAllExpandable, flattenTree } from "./sheetUtils.js";
-import { createControllableSignal } from "../../../hooks/createControllableSignal.js";
+import { DataSheetColumn, createColumnSlotsAccessor } from "./DataSheetColumn.js";
+import { buildHeaderTable, normalizeHeader } from "./DataSheet.utils.js";
 import { startPointerDrag } from "../../../helpers/startPointerDrag.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 { useI18n } from "../../../providers/i18n/I18nContext.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.js";
-const DataSheet = (props) => {
-  const [local] = splitProps(props, ["items", "persistKey", "hideConfigBar", "inset", "contentStyle", "sorts", "onSortsChange", "autoSort", "page", "onPageChange", "totalPageCount", "itemsPerPage", "displayPageCount", "expandedItems", "onExpandedItemsChange", "getChildren", "selectMode", "selectedItems", "onSelectedItemsChange", "autoSelect", "isItemSelectable", "cellClass", "cellStyle", "onItemsReorder", "class", "children"]);
+import { DialogContext } from "../../disclosure/Dialog.js";
+import { useI18n } from "../../../providers/i18n/I18nProvider.js";
+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, trRowClass } from "./DataSheet.styles.js";
+import { useDataSheetSorting } from "./hooks/useDataSheetSorting.js";
+import { useDataSheetPaging } from "./hooks/useDataSheetPaging.js";
+import { useDataSheetExpansion } from "./hooks/useDataSheetExpansion.js";
+import { useDataSheetSelection } from "./hooks/useDataSheetSelection.js";
+import { useDataSheetReorder } from "./hooks/useDataSheetReorder.js";
+import { useDataSheetFixedColumns } from "./hooks/useDataSheetFixedColumns.js";
+import { useDataSheetHeaderCell } from "./hooks/useDataSheetHeaderCell.js";
+const DataSheetInner = (props) => {
+  const [local] = splitProps(props, ["items", "storageKey", "hideConfigBar", "inset", "contentStyle", "sorts", "onSortsChange", "autoSort", "page", "onPageChange", "totalPageCount", "pageSize", "displayPageCount", "expandedItems", "onExpandedItemsChange", "itemChildren", "selectionMode", "selection", "onSelectionChange", "autoSelect", "isItemSelectable", "cellClass", "cellStyle", "onItemsReorder", "class", "children"]);
   const dialog = useContext(DialogContext);
   const i18n = useI18n();
-  const resolved = children(() => local.children);
-  const columnDefs = createMemo(() => resolved.toArray().filter(isDataSheetColumnDef));
-  const [config, setConfig] = local.persistKey != null && local.persistKey !== "" ? useSyncConfig(`sheet.${local.persistKey}`, {
+  const [rawColumns, ColumnsProvider] = createColumnSlotsAccessor();
+  const columnDefs = createMemo(() => rawColumns().map((col) => ({
+    key: col.key,
+    header: normalizeHeader(col.header),
+    headerContent: col.headerContent,
+    headerStyle: col.headerStyle,
+    summary: col.summary,
+    tooltip: col.tooltip,
+    cell: col.children,
+    class: col.class,
+    fixed: col.fixed ?? false,
+    hidden: col.hidden ?? false,
+    collapse: col.collapse ?? false,
+    width: col.width,
+    sortable: col.sortable ?? true,
+    resizable: col.resizable ?? true
+  })));
+  const [config, setConfig] = local.storageKey != null && local.storageKey !== "" ? useSyncConfig(`sheet.${local.storageKey}`, {
     columnRecord: {}
   }) : createSignal({
     columnRecord: {}
@@ -78,9 +99,9 @@ const DataSheet = (props) => {
   async function openConfigDialog() {
     if (!dialog) return;
     const {
-      DataSheetConfigDialog
+      DataSheetConfigDialog: ConfigDialog
     } = await import("./DataSheetConfigDialog");
-    const allCols = resolved.toArray().filter(isDataSheetColumnDef);
+    const allCols = columnDefs();
     const columnInfos = allCols.filter((col) => !col.collapse).map((col) => ({
       key: col.key,
       header: col.header,
@@ -90,12 +111,12 @@ const DataSheet = (props) => {
       width: col.width
     }));
     const currentConfig = config();
-    const result = await dialog.show(() => _$createComponent(DataSheetConfigDialog, {
+    const result = await dialog.show(ConfigDialog, {
       columnInfos,
       currentConfig
-    }), {
+    }, {
       header: "Sheet Settings",
-      closeOnBackdrop: true,
+      closeOnInteractOutside: true,
       closeOnEscape: true
     });
     if (result) {
@@ -104,140 +125,61 @@ const DataSheet = (props) => {
   }
   const headerTable = createMemo(() => buildHeaderTable(effectiveColumns()));
   const hasSummary = createMemo(() => effectiveColumns().some((col) => col.summary != null));
-  const [sorts, setSorts] = createControllableSignal({
-    value: () => local.sorts ?? [],
-    onChange: () => local.onSortsChange
+  const {
+    sorts,
+    toggleSort,
+    sortIndex,
+    sortedItems
+  } = useDataSheetSorting({
+    sorts: () => local.sorts,
+    onSortsChange: () => local.onSortsChange,
+    items: () => local.items,
+    autoSort: () => local.autoSort
   });
-  function toggleSort(key, multiple) {
-    const current = sorts();
-    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
-        }]);
-      } else {
-        const updated = current.filter((s) => s.key !== key);
-        setSorts(multiple ? updated : []);
-      }
-    } else {
-      const newSort = {
-        key,
-        desc: false
-      };
-      setSorts(multiple ? [...current, newSort] : [newSort]);
-    }
-  }
   function getSortDef(key) {
     return sorts().find((s) => s.key === key);
   }
-  function getSortIndex(key) {
-    if (sorts().length <= 1) return void 0;
-    const idx = sorts().findIndex((s) => s.key === key);
-    return idx >= 0 ? idx + 1 : void 0;
-  }
-  const sortedItems = createMemo(() => {
-    if (!local.autoSort) return local.items ?? [];
-    return applySorting(local.items ?? [], sorts());
-  });
-  const [currentPage, setCurrentPage] = createControllableSignal({
-    value: () => local.page ?? 1,
-    onChange: () => local.onPageChange
-  });
-  const effectivePageCount = createMemo(() => {
-    const ipp = local.itemsPerPage;
-    if (ipp != null && ipp !== 0 && (local.items ?? []).length > 0) {
-      return Math.ceil((local.items ?? []).length / ipp);
-    }
-    return local.totalPageCount ?? 0;
-  });
-  const pagedItems = createMemo(() => {
-    const ipp = local.itemsPerPage;
-    if (ipp == null || ipp === 0) return sortedItems();
-    if ((local.items ?? []).length <= 0) return sortedItems();
-    const page = currentPage();
-    return sortedItems().slice((page - 1) * ipp, page * ipp);
+  const {
+    currentPage,
+    setCurrentPage,
+    pageCount,
+    pagedItems
+  } = useDataSheetPaging({
+    page: () => local.page,
+    onPageChange: () => local.onPageChange,
+    pageSize: () => local.pageSize,
+    totalPageCount: () => local.totalPageCount,
+    items: () => local.items,
+    sortedItems
   });
   const originalIndexMap = createMemo(() => {
     const map = /* @__PURE__ */ new Map();
     (local.items ?? []).forEach((item, i) => map.set(item, i));
     return map;
   });
-  const hasExpandFeature = () => local.getChildren != null;
-  const hasSelectFeature = () => local.selectMode != null;
-  const hasReorderFeature = () => local.onItemsReorder != null;
-  function createTrackedWidth() {
-    const [width, setWidth] = createSignal(0);
-    const register = (el) => {
-      createResizeObserver(el, () => {
-        setWidth(el.offsetWidth);
-      });
-    };
-    return [width, register];
-  }
-  const [expandColWidth, registerExpandColRef] = createTrackedWidth();
-  const [selectColWidth, registerSelectColRef] = createTrackedWidth();
-  const [reorderColWidth, registerReorderColRef] = createTrackedWidth();
-  const selectColLeft = createMemo(() => hasExpandFeature() ? `${expandColWidth()}px` : "0");
-  const reorderColLeft = createMemo(() => {
-    let left = 0;
-    if (hasExpandFeature()) left += expandColWidth();
-    if (hasSelectFeature()) left += selectColWidth();
-    return `${left}px`;
-  });
-  const columnRefs = /* @__PURE__ */ new Map();
-  const [columnWidths, setColumnWidths] = createSignal(/* @__PURE__ */ new Map());
-  const featureColTotalWidth = createMemo(() => {
-    let w = 0;
-    if (hasExpandFeature()) w += expandColWidth();
-    if (hasSelectFeature()) w += selectColWidth();
-    if (hasReorderFeature()) w += reorderColWidth();
-    return w;
-  });
-  const fixedLeftMap = createMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    const cols = effectiveColumns();
-    const widths = columnWidths();
-    let left = featureColTotalWidth();
-    for (let c = 0; c < cols.length; c++) {
-      if (!cols[c].fixed) break;
-      map.set(c, left);
-      left += widths.get(c) ?? 0;
-    }
-    return map;
-  });
-  const lastFixedIndex = createMemo(() => {
-    const cols = effectiveColumns();
-    let last = -1;
-    for (let c = 0; c < cols.length; c++) {
-      if (cols[c].fixed) last = c;
-      else break;
+  const {
+    hasExpandFeature,
+    hasSelectFeature,
+    hasReorderFeature,
+    registerExpandColRef,
+    registerSelectColRef,
+    registerReorderColRef,
+    selectColLeft,
+    reorderColLeft,
+    getFixedStyle,
+    isLastFixed,
+    registerColumnRef
+  } = useDataSheetFixedColumns({
+    get itemChildren() {
+      return local.itemChildren;
+    },
+    get selectionMode() {
+      return local.selectionMode;
+    },
+    get onItemsReorder() {
+      return local.onItemsReorder;
     }
-    return last;
-  });
-  function getFixedStyle(colIndex) {
-    const leftVal = fixedLeftMap().get(colIndex);
-    if (leftVal == null) return void 0;
-    return `left: ${leftVal}px`;
-  }
-  function isLastFixed(colIndex) {
-    return colIndex === lastFixedIndex();
-  }
-  function registerColumnRef(colIndex, el) {
-    columnRefs.set(colIndex, el);
-    createResizeObserver(el, () => {
-      setColumnWidths((prev) => {
-        const next = new Map(prev);
-        next.set(colIndex, el.offsetWidth);
-        return next;
-      });
-    });
-  }
+  }, effectiveColumns);
   const [resizeIndicatorStyle, setResizeIndicatorStyle] = createSignal({
     display: "none"
   });
@@ -306,185 +248,68 @@ const DataSheet = (props) => {
     const heights = headerRowHeights();
     return heights.reduce((sum, h) => sum + h, 0);
   });
-  const [expandedItems, setExpandedItems] = createControllableSignal({
-    value: () => local.expandedItems ?? [],
-    onChange: () => local.onExpandedItemsChange
-  });
-  function toggleExpand(item) {
-    const current = expandedItems();
-    if (current.includes(item)) {
-      setExpandedItems(current.filter((i) => i !== item));
-    } else {
-      setExpandedItems([...current, item]);
+  const {
+    expandedItems,
+    flatItems,
+    toggleExpand,
+    isAllExpanded,
+    toggleExpandAll
+  } = useDataSheetExpansion({
+    get expandedItems() {
+      return local.expandedItems;
+    },
+    get onExpandedItemsChange() {
+      return local.onExpandedItemsChange;
+    },
+    get itemChildren() {
+      return local.itemChildren;
     }
-  }
-  function toggleExpandAll() {
-    if (!local.getChildren) return;
-    const indexMap = originalIndexMap();
-    const allExpandable = collectAllExpandable(pagedItems(), local.getChildren, (item) => indexMap.get(item) ?? -1);
-    const isAllExpanded2 = allExpandable.every((item) => expandedItems().includes(item));
-    setExpandedItems(isAllExpanded2 ? [] : allExpandable);
-  }
-  const flatItems = createMemo(() => {
-    const indexMap = originalIndexMap();
-    return flattenTree(pagedItems(), expandedItems(), local.getChildren, (item) => indexMap.get(item) ?? -1);
-  });
-  const [selectedItems, setSelectedItems] = createControllableSignal({
-    value: () => local.selectedItems ?? [],
-    onChange: () => local.onSelectedItemsChange
-  });
-  const [lastClickedRow, setLastClickedRow] = createSignal(null);
-  const [lastClickAction, setLastClickAction] = createSignal("select");
-  function getItemSelectable(item) {
-    if (!local.isItemSelectable) return true;
-    return local.isItemSelectable(item);
-  }
-  function toggleSelect(item) {
-    if (getItemSelectable(item) !== true) return;
-    const isSelected = selectedItems().includes(item);
-    setLastClickAction(isSelected ? "deselect" : "select");
-    if (local.selectMode === "single") {
-      setSelectedItems(isSelected ? [] : [item]);
-    } else {
-      setSelectedItems(isSelected ? selectedItems().filter((i) => i !== item) : [...selectedItems(), item]);
-    }
-  }
-  function toggleSelectAll() {
-    const selectableItems = displayItems().map((flat) => flat.item).filter((item) => getItemSelectable(item) === true);
-    const isAllSelected = selectableItems.every((item) => selectedItems().includes(item));
-    setSelectedItems(isAllSelected ? [] : selectableItems);
-  }
-  function rangeSelect(targetRow) {
-    const lastRow = lastClickedRow();
-    if (lastRow == null) return;
-    const start = Math.min(lastRow, targetRow);
-    const end = Math.max(lastRow, targetRow);
-    const rangeItems = displayItems().slice(start, end + 1).map((flat) => flat.item).filter((item) => getItemSelectable(item) === true);
-    if (lastClickAction() === "select") {
-      const newItems = [...selectedItems()];
-      for (const item of rangeItems) {
-        if (!newItems.includes(item)) newItems.push(item);
-      }
-      setSelectedItems(newItems);
-    } else {
-      setSelectedItems(selectedItems().filter((item) => !rangeItems.includes(item)));
+  }, pagedItems, originalIndexMap);
+  const displayItems = flatItems;
+  const {
+    selection,
+    setSelection,
+    getItemSelectable,
+    toggleSelect,
+    toggleSelectAll,
+    rangeSelect,
+    lastClickedRow,
+    setLastClickedRow
+  } = useDataSheetSelection({
+    get selectionMode() {
+      return local.selectionMode;
+    },
+    get selection() {
+      return local.selection;
+    },
+    get onSelectionChange() {
+      return local.onSelectionChange;
+    },
+    get isItemSelectable() {
+      return local.isItemSelectable;
     }
-  }
+  }, displayItems);
   function selectItem(item) {
     if (getItemSelectable(item) !== true) return;
-    if (local.selectMode === "single") {
-      setSelectedItems([item]);
+    if (local.selectionMode === "single") {
+      setSelection([item]);
     } else {
-      if (!selectedItems().includes(item)) {
-        setSelectedItems([...selectedItems(), item]);
+      if (!selection().includes(item)) {
+        setSelection([...selection(), item]);
       }
     }
   }
-  const [dragState, setDragState] = createSignal(null);
-  function isDescendant(parent, child) {
-    if (!local.getChildren) return false;
-    const childItems = local.getChildren(parent, 0);
-    if (!childItems) return false;
-    for (const c of childItems) {
-      if (c === child) return true;
-      if (isDescendant(c, child)) return true;
+  const {
+    dragState,
+    onReorderPointerDown
+  } = useDataSheetReorder({
+    get onItemsReorder() {
+      return local.onItemsReorder;
+    },
+    get itemChildren() {
+      return local.itemChildren;
     }
-    return false;
-  }
-  function onReorderPointerDown(e, item) {
-    e.preventDefault();
-    const target = e.currentTarget;
-    const tableEl = target.closest("table");
-    const tbody = tableEl.querySelector("tbody");
-    const rows = Array.from(tbody.rows);
-    setDragState({
-      draggingItem: item,
-      targetItem: null,
-      position: null
-    });
-    startPointerDrag(target, e.pointerId, {
-      onMove(ev) {
-        var _a;
-        let foundTarget = null;
-        let foundPosition = null;
-        for (let i = 0; i < rows.length; i++) {
-          const row = rows[i];
-          const rect = row.getBoundingClientRect();
-          if (ev.clientY < rect.top || ev.clientY > rect.bottom) continue;
-          if (i >= displayItems().length) break;
-          const flat = displayItems()[i];
-          if (flat.item === item) break;
-          if (isDescendant(item, flat.item)) break;
-          const relY = ev.clientY - rect.top;
-          const third = rect.height / 3;
-          if (relY < third) {
-            foundPosition = "before";
-          } else if (relY > third * 2) {
-            foundPosition = "after";
-          } else {
-            foundPosition = local.getChildren ? "inside" : relY < rect.height / 2 ? "before" : "after";
-          }
-          foundTarget = flat.item;
-          break;
-        }
-        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");
-          if (i < displayItems().length) {
-            const flat = displayItems()[i];
-            if (flat.item === item) {
-              rows[i].setAttribute("data-dragging", "");
-            }
-            if (flat.item === foundTarget && foundPosition === "inside") {
-              rows[i].setAttribute("data-drag-over", "inside");
-            }
-          }
-        }
-        const indicatorEl = (_a = tableEl.closest("[data-sheet-scroll]")) == null ? void 0 : _a.querySelector("[data-reorder-indicator]");
-        if (indicatorEl) {
-          if (foundTarget != null && foundPosition != null && foundPosition !== "inside") {
-            const targetIdx = displayItems().findIndex((f) => f.item === foundTarget);
-            if (targetIdx >= 0) {
-              const targetRow = rows[targetIdx];
-              const containerRect = tableEl.closest("[data-sheet-scroll]").getBoundingClientRect();
-              const rowRect = targetRow.getBoundingClientRect();
-              const scrollEl = tableEl.closest("[data-sheet-scroll]");
-              const top = foundPosition === "before" ? rowRect.top - containerRect.top + scrollEl.scrollTop : rowRect.bottom - containerRect.top + scrollEl.scrollTop;
-              indicatorEl.style.display = "block";
-              indicatorEl.style.top = `${top}px`;
-            }
-          } else {
-            indicatorEl.style.display = "none";
-          }
-        }
-      },
-      onEnd() {
-        var _a, _b;
-        const state = dragState();
-        if ((state == null ? void 0 : state.targetItem) != null && state.position != null) {
-          (_a = local.onItemsReorder) == null ? void 0 : _a.call(local, {
-            item: state.draggingItem,
-            targetItem: state.targetItem,
-            position: state.position
-          });
-        }
-        for (const row of rows) {
-          row.removeAttribute("data-dragging");
-          row.removeAttribute("data-drag-over");
-        }
-        const indicatorEl = (_b = tableEl.closest("[data-sheet-scroll]")) == null ? void 0 : _b.querySelector("[data-reorder-indicator]");
-        if (indicatorEl) {
-          indicatorEl.style.display = "none";
-        }
-        setDragState(null);
-      }
-    });
-  }
+  }, displayItems);
   function onTableKeyDown(e) {
     if (e.key !== "Enter" || e.altKey || e.ctrlKey || e.metaKey) return;
     const focused = document.activeElement;
@@ -507,370 +332,175 @@ const DataSheet = (props) => {
     e.preventDefault();
     targetFocusable.focus();
   }
-  const displayItems = flatItems;
-  const isExpandColLastFixed = () => hasExpandFeature() && !hasSelectFeature() && !hasReorderFeature() && lastFixedIndex() < 0;
-  const isSelectColLastFixed = () => hasSelectFeature() && !hasReorderFeature() && lastFixedIndex() < 0;
-  const isReorderColLastFixed = () => hasReorderFeature() && lastFixedIndex() < 0;
+  const isExpandColLastFixed = () => hasExpandFeature() && !hasSelectFeature() && !hasReorderFeature() && isLastFixed(-1);
+  const isSelectColLastFixed = () => hasSelectFeature() && !hasReorderFeature() && isLastFixed(-1);
+  const isReorderColLastFixed = () => hasReorderFeature() && isLastFixed(-1);
   const featureHeaderRowspan = createMemo(() => {
     const headerRows = headerTable().length;
     const summaryRow = hasSummary() ? 1 : 0;
     return headerRows + summaryRow;
   });
-  const isAllExpanded = createMemo(() => {
-    if (!local.getChildren) return false;
-    const indexMap = originalIndexMap();
-    const allExpandable = collectAllExpandable(pagedItems(), local.getChildren, (item) => indexMap.get(item) ?? -1);
-    return allExpandable.length > 0 && allExpandable.every((item) => expandedItems().includes(item));
+  void dragState;
+  const {
+    renderHeaderCell
+  } = useDataSheetHeaderCell({
+    effectiveColumns,
+    headerRowTops,
+    getFixedStyle,
+    isLastFixed,
+    registerColumnRef,
+    toggleSort,
+    getSortDef,
+    sortIndex,
+    onResizerPointerdown,
+    onResizerDoubleClick,
+    thClass,
+    fixedClass,
+    sortableThClass,
+    fixedLastClass,
+    thContentClass,
+    resizerClass,
+    sortIconClass
   });
-  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)() && (dialog != 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 page() {
-                return currentPage();
-              },
-              onPageChange: setCurrentPage,
-              get totalPageCount() {
-                return effectivePageCount();
-              },
-              get displayPageCount() {
-                return local.displayPageCount;
-              },
-              size: "sm"
-            });
-          }
-        }), _el$3);
-        _$insert(_el$2, _$createComponent(Show, {
-          when: dialog != null,
-          get children() {
-            var _el$4 = _tmpl$();
-            _el$4.$$click = openConfigDialog;
-            _$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();
-      },
-      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;
-          },
-          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",
-              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() ? i18n.t("dataSheet.collapseAll") : i18n.t("dataSheet.expandAll");
-              _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;
-          },
-          get children() {
-            var _el$19 = _tmpl$8();
-            _$use(registerSelectColRef, _el$19);
-            _$insert(_el$19, _$createComponent(Show, {
+  function renderExpandCell(flatItem) {
+    return (() => {
+      var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
+      _$className(_el$2, featureCellBodyWrapperClass);
+      _$insert(_el$2, _$createComponent(For, {
+        get each() {
+          return Array.from({
+            length: flatItem.depth
+          });
+        },
+        children: () => (() => {
+          var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild;
+          _$className(_el$4, expandIndentGuideClass);
+          _$className(_el$5, expandIndentGuideLineClass);
+          return _el$4;
+        })()
+      }), null);
+      _$insert(_el$2, _$createComponent(Show, {
+        get when() {
+          return flatItem.hasChildren;
+        },
+        get children() {
+          var _el$3 = _tmpl$();
+          _el$3.$$click = () => toggleExpand(flatItem.item);
+          _$className(_el$3, expandToggleClass);
+          _$insert(_el$3, _$createComponent(Icon, {
+            icon: IconChevronDown,
+            size: "1em",
+            get ["class"]() {
+              return clsx("transition-transform", expandedItems().includes(flatItem.item) ? "rotate-0" : "-rotate-90");
+            }
+          }));
+          return _el$3;
+        }
+      }), null);
+      _$effect(() => _$className(_el$, twMerge(featureTdClass, fixedClass, "z-[2]", isExpandColLastFixed() ? fixedLastClass : void 0)));
+      return _el$;
+    })();
+  }
+  function renderSelectCell(flatItem) {
+    const selectable = () => getItemSelectable(flatItem.item);
+    const isSelected = () => selection().includes(flatItem.item);
+    const rowIndex = () => flatItem.row;
+    return (() => {
+      var _el$6 = _tmpl$5();
+      _$insert(_el$6, _$createComponent(Show, {
+        get when() {
+          return local.selectionMode === "multiple";
+        },
+        get fallback() {
+          return (
+            /* single mode */
+            _$createComponent(Show, {
               get when() {
-                return local.selectMode === "multiple";
+                return selectable() === true;
               },
               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"
+                var _el$8 = _tmpl$3(), _el$9 = _el$8.firstChild;
+                _el$8.$$click = () => toggleSelect(flatItem.item);
+                _$className(_el$8, featureCellBodyClickableClass);
+                _$insert(_el$9, _$createComponent(Icon, {
+                  icon: IconChevronRight,
+                  size: "1em"
                 }));
-                return _el$20;
+                _$effect(() => _$className(_el$9, twMerge(selectSingleClass, isSelected() ? selectSingleSelectedClass : selectSingleUnselectedClass)));
+                return _el$8;
               }
-            }));
-            _$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;
-          }
-        }), null);
-        _$insert(_el$15, _$createComponent(Show, {
-          get when() {
-            return _$memo(() => !!hasReorderFeature())() && rowIndex() === 0;
-          },
-          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;
-          }
-        }), 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
-                          });
-                        }
-                      }), 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
-                          });
-                        }
-                      }), null);
-                      _$insert(_el$26, _$createComponent(Show, {
-                        get when() {
-                          return sortDef() == null;
-                        },
-                        get children() {
-                          return _$createComponent(Icon, {
-                            icon: IconArrowsSort,
-                            "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 gap-2", 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;
-              })();
+            })
+          );
+        },
+        get children() {
+          var _el$7 = _tmpl$4();
+          _el$7.$$click = (e) => {
+            if (e.shiftKey) {
+              rangeSelect(rowIndex());
+            } else {
+              toggleSelect(flatItem.item);
             }
-          })
-        }), null);
-        return _el$15;
-      })()
-    }), null);
-    _$insert(_el$1, _$createComponent(Show, {
+            setLastClickedRow(rowIndex());
+          };
+          _$className(_el$7, featureCellBodyClickableClass);
+          _$insert(_el$7, _$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$7, "title", typeof selectable() === "string" ? selectable() : void 0));
+          return _el$7;
+        }
+      }));
+      _$effect((_p$) => {
+        var _v$ = twMerge(featureTdClass, fixedClass, "z-[2]", isSelectColLastFixed() ? fixedLastClass : void 0), _v$2 = selectColLeft();
+        _v$ !== _p$.e && _$className(_el$6, _p$.e = _v$);
+        _v$2 !== _p$.t && _$setStyleProperty(_el$6, "left", _p$.t = _v$2);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$6;
+    })();
+  }
+  function renderReorderCell(flatItem) {
+    return (() => {
+      var _el$0 = _tmpl$6(), _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild;
+      _el$1.$$pointerdown = (e) => onReorderPointerDown(e, flatItem.item);
+      _$className(_el$1, reorderCellWrapperClass);
+      _$className(_el$10, reorderHandleClass);
+      _$insert(_el$10, _$createComponent(Icon, {
+        icon: IconGripVertical,
+        size: "1em"
+      }));
+      _$effect((_p$) => {
+        var _v$3 = twMerge(featureTdClass, fixedClass, "z-[2]", isReorderColLastFixed() ? fixedLastClass : void 0), _v$4 = reorderColLeft();
+        _v$3 !== _p$.e && _$className(_el$0, _p$.e = _v$3);
+        _v$4 !== _p$.t && _$setStyleProperty(_el$0, "left", _p$.t = _v$4);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$0;
+    })();
+  }
+  function renderSummaryRow() {
+    return _$createComponent(Show, {
       get when() {
         return hasSummary();
       },
       get children() {
-        var _el$10 = _tmpl$4();
-        _$insert(_el$10, _$createComponent(For, {
+        var _el$11 = _tmpl$7();
+        _$insert(_el$11, _$createComponent(For, {
           get each() {
             return effectiveColumns();
           },
@@ -883,244 +513,328 @@ const DataSheet = (props) => {
               return parts.join("; ");
             };
             return (() => {
-              var _el$28 = _tmpl$1(), _el$29 = _el$28.firstChild;
-              _$className(_el$29, thContentClass);
-              _$insert(_el$29, () => {
+              var _el$12 = _tmpl$8(), _el$13 = _el$12.firstChild;
+              _$className(_el$13, thContentClass);
+              _$insert(_el$13, () => {
                 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);
+                var _v$5 = twMerge(thClass, summaryThClass, fixedClass, col.fixed ? "z-[5]" : "z-[3]", isLastFixed(colIndex()) ? fixedLastClass : void 0), _v$6 = summaryStyle();
+                _v$5 !== _p$.e && _$className(_el$12, _p$.e = _v$5);
+                _p$.t = _$style(_el$12, _v$6, _p$.t);
                 return _p$;
               }, {
                 e: void 0,
                 t: void 0
               });
-              return _el$28;
+              return _el$12;
             })();
           }
         }));
-        return _el$10;
+        return _el$11;
       }
-    }), 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 _$createComponent(ColumnsProvider, {
+    get children() {
+      return [_$memo(() => local.children), (() => {
+        var _el$14 = _tmpl$10(), _el$18 = _el$14.firstChild, _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild, _el$24 = _el$20.nextSibling, _el$25 = _el$24.nextSibling, _el$26 = _el$19.nextSibling, _el$27 = _el$26.nextSibling;
+        _$insert(_el$14, _$createComponent(Show, {
+          get when() {
+            return _$memo(() => !!!local.hideConfigBar)() && (dialog != null || pageCount() > 1);
+          },
+          get children() {
+            var _el$15 = _tmpl$0(), _el$16 = _el$15.firstChild;
+            _$className(_el$15, toolbarClass);
+            _$insert(_el$15, _$createComponent(Show, {
+              get when() {
+                return pageCount() > 1;
+              },
+              get children() {
+                return _$createComponent(Pagination, {
+                  get page() {
+                    return currentPage();
+                  },
+                  onPageChange: setCurrentPage,
+                  get totalPageCount() {
+                    return pageCount();
+                  },
+                  get displayPageCount() {
+                    return local.displayPageCount;
+                  },
+                  size: "sm"
+                });
+              }
+            }), _el$16);
+            _$insert(_el$15, _$createComponent(Show, {
+              when: dialog != null,
+              get children() {
+                var _el$17 = _tmpl$9();
+                _el$17.$$click = openConfigDialog;
+                _$className(_el$17, configButtonClass);
+                _$insert(_el$17, _$createComponent(Icon, {
+                  icon: IconSettings,
+                  size: "1em"
+                }));
+                return _el$17;
+              }
+            }), null);
+            return _el$15;
+          }
+        }), _el$18);
+        _el$19.$$pointerdown = (e) => {
+          if (e.shiftKey && hasSelectFeature()) {
+            e.preventDefault();
           }
         };
-        _$insert(_el$30, _$createComponent(Show, {
+        _el$19.$$keydown = onTableKeyDown;
+        _$insert(_el$20, _$createComponent(Show, {
           get when() {
             return hasExpandFeature();
           },
           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, {
+            return _tmpl$1();
+          }
+        }), null);
+        _$insert(_el$20, _$createComponent(Show, {
+          get when() {
+            return hasSelectFeature();
+          },
+          get children() {
+            return _tmpl$1();
+          }
+        }), null);
+        _$insert(_el$20, _$createComponent(Show, {
+          get when() {
+            return hasReorderFeature();
+          },
+          get children() {
+            return _tmpl$1();
+          }
+        }), null);
+        _$insert(_el$20, _$createComponent(For, {
+          get each() {
+            return effectiveColumns();
+          },
+          children: (col) => (() => {
+            var _el$28 = _tmpl$1();
+            _$effect((_$p) => _$style(_el$28, col.width != null ? {
+              width: col.width.replace(/;/g, "")
+            } : void 0, _$p));
+            return _el$28;
+          })()
+        }), null);
+        _$insert(_el$24, _$createComponent(For, {
+          get each() {
+            return headerTable();
+          },
+          children: (row, rowIndex) => (() => {
+            var _el$29 = _tmpl$7();
+            _$use((el) => registerHeaderRow(rowIndex(), el), _el$29);
+            _$insert(_el$29, _$createComponent(Show, {
               get when() {
-                return flat.hasChildren;
+                return _$memo(() => !!hasExpandFeature())() && rowIndex() === 0;
               },
               get children() {
-                var _el$33 = _tmpl$10();
-                _el$33.$$click = () => toggleExpand(flat.item);
-                _$className(_el$33, expandToggleClass);
-                _$insert(_el$33, _$createComponent(Icon, {
+                var _el$30 = _tmpl$11(), _el$31 = _el$30.firstChild, _el$32 = _el$31.firstChild;
+                _$use(registerExpandColRef, _el$30);
+                _$className(_el$31, featureCellWrapperClass);
+                _$addEventListener(_el$32, "click", toggleExpandAll, true);
+                _$className(_el$32, expandToggleClass);
+                _$insert(_el$32, _$createComponent(Icon, {
                   icon: IconChevronDown,
                   size: "1em",
                   get ["class"]() {
-                    return clsx("transition-transform", expandedItems().includes(flat.item) ? "rotate-0" : "-rotate-90");
+                    return clsx("transition-transform", isAllExpanded() ? "rotate-0" : "-rotate-90");
                   }
                 }));
-                return _el$33;
+                _$effect((_p$) => {
+                  var _v$11 = twMerge(featureThClass, fixedClass, "z-[5]", isExpandColLastFixed() ? fixedLastClass : void 0), _v$12 = featureHeaderRowspan(), _v$13 = isAllExpanded() ? i18n.t("dataSheet.collapseAll") : i18n.t("dataSheet.expandAll");
+                  _v$11 !== _p$.e && _$className(_el$30, _p$.e = _v$11);
+                  _v$12 !== _p$.t && _$setAttribute(_el$30, "rowspan", _p$.t = _v$12);
+                  _v$13 !== _p$.a && _$setAttribute(_el$32, "title", _p$.a = _v$13);
+                  return _p$;
+                }, {
+                  e: void 0,
+                  t: void 0,
+                  a: void 0
+                });
+                return _el$30;
               }
             }), 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();
-          },
-          get children() {
-            return (() => {
-              const selectable = () => getItemSelectable(flat.item);
-              const isSelected = () => selectedItems().includes(flat.item);
-              const rowIndex = () => flat.row;
-              return (() => {
-                var _el$39 = _tmpl$14();
-                _$insert(_el$39, _$createComponent(Show, {
+            _$insert(_el$29, _$createComponent(Show, {
+              get when() {
+                return _$memo(() => !!hasSelectFeature())() && rowIndex() === 0;
+              },
+              get children() {
+                var _el$33 = _tmpl$12();
+                _$use(registerSelectColRef, _el$33);
+                _$insert(_el$33, _$createComponent(Show, {
                   get when() {
-                    return local.selectMode === "multiple";
-                  },
-                  get fallback() {
-                    return (
-                      /* single mode */
-                      _$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;
-                        }
-                      })
-                    );
+                    return local.selectionMode === "multiple";
                   },
                   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, {
+                    var _el$34 = _tmpl$4();
+                    _el$34.$$click = () => toggleSelectAll();
+                    _$className(_el$34, featureCellClickableClass);
+                    _$insert(_el$34, _$createComponent(Checkbox, {
                       get value() {
-                        return isSelected();
-                      },
-                      get disabled() {
-                        return selectable() !== true;
+                        const selectableItems = displayItems().map((flat) => flat.item).filter((item) => getItemSelectable(item) === true);
+                        return selectableItems.length > 0 && selectableItems.every((item) => selection().includes(item));
                       },
                       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);
-                      }
+                      "class": "pointer-events-none"
                     }));
-                    _$effect(() => _$setAttribute(_el$40, "title", typeof selectable() === "string" ? selectable() : void 0));
-                    return _el$40;
+                    return _el$34;
                   }
                 }));
                 _$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);
+                  var _v$14 = twMerge(featureThClass, fixedClass, "z-[5]", isSelectColLastFixed() ? fixedLastClass : void 0), _v$15 = featureHeaderRowspan(), _v$16 = selectColLeft();
+                  _v$14 !== _p$.e && _$className(_el$33, _p$.e = _v$14);
+                  _v$15 !== _p$.t && _$setAttribute(_el$33, "rowspan", _p$.t = _v$15);
+                  _v$16 !== _p$.a && _$setStyleProperty(_el$33, "left", _p$.a = _v$16);
                   return _p$;
                 }, {
                   e: void 0,
-                  t: void 0
+                  t: void 0,
+                  a: void 0
                 });
-                return _el$39;
-              })();
-            })();
-          }
-        }), null);
-        _$insert(_el$30, _$createComponent(Show, {
-          get when() {
-            return hasReorderFeature();
-          },
-          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;
-          }
+                return _el$33;
+              }
+            }), null);
+            _$insert(_el$29, _$createComponent(Show, {
+              get when() {
+                return _$memo(() => !!hasReorderFeature())() && rowIndex() === 0;
+              },
+              get children() {
+                var _el$35 = _tmpl$12();
+                _$use(registerReorderColRef, _el$35);
+                _$effect((_p$) => {
+                  var _v$17 = twMerge(featureThClass, fixedClass, "z-[5]", isReorderColLastFixed() ? fixedLastClass : void 0), _v$18 = featureHeaderRowspan(), _v$19 = reorderColLeft();
+                  _v$17 !== _p$.e && _$className(_el$35, _p$.e = _v$17);
+                  _v$18 !== _p$.t && _$setAttribute(_el$35, "rowspan", _p$.t = _v$18);
+                  _v$19 !== _p$.a && _$setStyleProperty(_el$35, "left", _p$.a = _v$19);
+                  return _p$;
+                }, {
+                  e: void 0,
+                  t: void 0,
+                  a: void 0
+                });
+                return _el$35;
+              }
+            }), null);
+            _$insert(_el$29, _$createComponent(For, {
+              each: row,
+              children: (cell, cellColIndex) => _$createComponent(Show, {
+                when: cell,
+                children: (c) => renderHeaderCell(c(), cellColIndex(), rowIndex())
+              })
+            }), null);
+            return _el$29;
+          })()
         }), null);
-        _$insert(_el$30, _$createComponent(For, {
+        _$insert(_el$24, renderSummaryRow, null);
+        _$insert(_el$25, _$createComponent(For, {
           get each() {
-            return effectiveColumns();
+            return displayItems();
           },
-          children: (col, colIndex) => (() => {
-            var _el$43 = _tmpl$14();
-            _$insert(_el$43, () => col.cell({
-              item: flat.item,
-              index: flat.index,
-              row: flat.row,
-              depth: flat.depth
-            }));
+          children: (flat) => (() => {
+            var _el$36 = _tmpl$7();
+            _el$36.$$click = () => {
+              if (local.autoSelect) {
+                selectItem(flat.item);
+              }
+            };
+            _$insert(_el$36, _$createComponent(Show, {
+              get when() {
+                return hasExpandFeature();
+              },
+              get children() {
+                return renderExpandCell(flat);
+              }
+            }), null);
+            _$insert(_el$36, _$createComponent(Show, {
+              get when() {
+                return hasSelectFeature();
+              },
+              get children() {
+                return renderSelectCell(flat);
+              }
+            }), null);
+            _$insert(_el$36, _$createComponent(Show, {
+              get when() {
+                return hasReorderFeature();
+              },
+              get children() {
+                return renderReorderCell(flat);
+              }
+            }), null);
+            _$insert(_el$36, _$createComponent(For, {
+              get each() {
+                return effectiveColumns();
+              },
+              children: (col, colIndex) => (() => {
+                var _el$37 = _tmpl$5();
+                _$insert(_el$37, () => col.cell({
+                  item: flat.item,
+                  index: flat.index,
+                  row: flat.row,
+                  depth: flat.depth
+                }));
+                _$effect((_p$) => {
+                  var _a, _b;
+                  var _v$22 = 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$23 = [getFixedStyle(colIndex()), col.width != null ? `max-width: ${col.width.replace(/;/g, "")}` : void 0, (_b = local.cellStyle) == null ? void 0 : _b.call(local, flat.item, col.key)].filter(Boolean).join("; ") || void 0;
+                  _v$22 !== _p$.e && _$className(_el$37, _p$.e = _v$22);
+                  _p$.t = _$style(_el$37, _v$23, _p$.t);
+                  return _p$;
+                }, {
+                  e: void 0,
+                  t: void 0
+                });
+                return _el$37;
+              })()
+            }), null);
             _$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);
+              var _v$20 = selection().includes(flat.item) ? "" : void 0, _v$21 = clsx(trRowClass, local.autoSelect && "cursor-pointer");
+              _v$20 !== _p$.e && _$setAttribute(_el$36, "data-selected", _p$.e = _v$20);
+              _v$21 !== _p$.t && _$className(_el$36, _p$.t = _v$21);
               return _p$;
             }, {
               e: void 0,
               t: void 0
             });
-            return _el$43;
+            return _el$36;
           })()
-        }), null);
+        }));
+        _$className(_el$26, resizeIndicatorClass);
+        _$className(_el$27, reorderIndicatorClass);
         _$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);
+          var _v$7 = local.storageKey ?? "", _v$8 = twMerge("flex flex-col", local.inset ? insetContainerClass : defaultContainerClass, local.class), _v$9 = twMerge(dataSheetContainerClass, "flex-1 min-h-0"), _v$0 = local.contentStyle, _v$1 = twMerge(tableClass, local.inset ? insetTableClass : void 0), _v$10 = resizeIndicatorStyle();
+          _v$7 !== _p$.e && _$setAttribute(_el$14, "data-sheet", _p$.e = _v$7);
+          _v$8 !== _p$.t && _$className(_el$14, _p$.t = _v$8);
+          _v$9 !== _p$.a && _$className(_el$18, _p$.a = _v$9);
+          _p$.o = _$style(_el$18, _v$0, _p$.o);
+          _v$1 !== _p$.i && _$className(_el$19, _p$.i = _v$1);
+          _p$.n = _$style(_el$26, _v$10, _p$.n);
           return _p$;
         }, {
           e: void 0,
-          t: void 0
+          t: void 0,
+          a: void 0,
+          o: void 0,
+          i: void 0,
+          n: 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$;
-  })();
+        return _el$14;
+      })()];
+    }
+  });
 };
-DataSheet.Column = DataSheetColumn;
-_$delegateEvents(["click", "keydown", "pointerdown", "dblclick"]);
+const DataSheet = Object.assign(DataSheetInner, {
+  Column: DataSheetColumn
+});
+_$delegateEvents(["click", "pointerdown", "keydown"]);
 export {
   DataSheet
 };