@simplysm/solid 13.0.75 → 13.0.77

package/src/components/data/sheet/DataSheet.tsx

@@ -1,5 +1,4 @@
 import {
-  children,
   createMemo,
   createSignal,
   For,
@@ -12,35 +11,29 @@ 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 "@simplysm/core-browser";
 import type {
-  FlatItem,
+  DataSheetCellContext,
   DataSheetColumnDef,
   DataSheetConfig,
   DataSheetConfigColumnInfo,
   DataSheetProps,
-  DataSheetReorderEvent,
-  SortingDef,
-} from "./types";
-import { isDataSheetColumnDef, DataSheetColumn } from "./DataSheetColumn";
-import { applySorting, buildHeaderTable, collectAllExpandable, flattenTree } from "./sheetUtils";
-import { createControllableSignal } from "../../../hooks/createControllableSignal";
+  FlatItem,
+} from "./DataSheet.types";
+import { DataSheetColumn, createColumnSlotsAccessor } from "./DataSheetColumn";
+import { buildHeaderTable, normalizeHeader } from "./DataSheet.utils";
 import { startPointerDrag } from "../../../helpers/startPointerDrag";
 import { Icon } from "../../display/Icon";
 import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { Pagination } from "../Pagination";
 import { useSyncConfig } from "../../../hooks/useSyncConfig";
-import { DialogContext } from "../../disclosure/DialogContext";
-import { useI18n } from "../../../providers/i18n/I18nContext";
-import "./DataSheet.css";
+import { DialogContext } from "../../disclosure/Dialog";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
 import {
   configButtonClass,
   defaultContainerClass,
@@ -74,17 +67,21 @@ import {
   thClass,
   thContentClass,
   toolbarClass,
+  trRowClass,
 } from "./DataSheet.styles";
+import { useDataSheetSorting } from "./hooks/useDataSheetSorting";
+import { useDataSheetPaging } from "./hooks/useDataSheetPaging";
+import { useDataSheetExpansion } from "./hooks/useDataSheetExpansion";
+import { useDataSheetSelection } from "./hooks/useDataSheetSelection";
+import { useDataSheetReorder } from "./hooks/useDataSheetReorder";
+import { useDataSheetFixedColumns } from "./hooks/useDataSheetFixedColumns";
+import { useDataSheetHeaderCell } from "./hooks/useDataSheetHeaderCell";
 
-interface DataSheetComponent {
-  <T>(props: DataSheetProps<T>): JSX.Element;
-  Column: typeof DataSheetColumn;
-}
 
-export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
+const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
   const [local] = splitProps(props, [
     "items",
-    "persistKey",
+    "storageKey",
     "hideConfigBar",
     "inset",
     "contentStyle",
@@ -94,14 +91,14 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     "page",
     "onPageChange",
     "totalPageCount",
-    "itemsPerPage",
+    "pageSize",
     "displayPageCount",
     "expandedItems",
     "onExpandedItemsChange",
-    "getChildren",
-    "selectMode",
-    "selectedItems",
-    "onSelectedItemsChange",
+    "itemChildren",
+    "selectionMode",
+    "selection",
+    "onSelectionChange",
     "autoSelect",
     "isItemSelectable",
     "cellClass",
@@ -115,18 +112,34 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
   const i18n = useI18n();
 
   // #region Column Collection
-  const resolved = children(() => local.children);
+  const [rawColumns, ColumnsProvider] = createColumnSlotsAccessor();
   const columnDefs = createMemo(
-    () => resolved.toArray().filter(isDataSheetColumnDef) as unknown as DataSheetColumnDef<T>[],
+    () =>
+      rawColumns().map(
+        (col): DataSheetColumnDef<TItem> => ({
+          key: col.key,
+          header: normalizeHeader(col.header),
+          headerContent: col.headerContent,
+          headerStyle: col.headerStyle,
+          summary: col.summary,
+          tooltip: col.tooltip,
+          cell: col.children as (ctx: DataSheetCellContext<TItem>) => JSX.Element,
+          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,
+        }),
+      ),
   );
 
   // #region Config (useSyncConfig)
-  /* eslint-disable solid/reactivity -- persistKey is static and only used once on component mount */
   const [config, setConfig] =
-    local.persistKey != null && local.persistKey !== ""
-      ? useSyncConfig<DataSheetConfig>(`sheet.${local.persistKey}`, { columnRecord: {} })
+    local.storageKey != null && local.storageKey !== ""
+      ? useSyncConfig<DataSheetConfig>(`sheet.${local.storageKey}`, { columnRecord: {} })
       : createSignal<DataSheetConfig>({ columnRecord: {} });
-  /* eslint-enable solid/reactivity */
 
   // Final columns with config applied — config's hidden/fixed/width/displayOrder overrides are applied
   const effectiveColumns = createMemo(() => {
@@ -166,11 +179,9 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
   async function openConfigDialog(): Promise<void> {
     if (!dialog) return;
 
-    const { DataSheetConfigDialog } = await import("./DataSheetConfigDialog");
+    const { DataSheetConfigDialog: ConfigDialog } = await import("./DataSheetConfigDialog");
 
-    const allCols = resolved
-      .toArray()
-      .filter(isDataSheetColumnDef) as unknown as DataSheetColumnDef<T>[];
+    const allCols = columnDefs();
 
     const columnInfos: DataSheetConfigColumnInfo[] = allCols
       .filter((col) => !col.collapse)
@@ -185,11 +196,12 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
 
     const currentConfig = config();
 
-    const result = await dialog.show<DataSheetConfig>(
-      () => <DataSheetConfigDialog columnInfos={columnInfos} currentConfig={currentConfig} />,
+    const result = await dialog.show(
+      ConfigDialog,
+      { columnInfos, currentConfig },
       {
         header: "Sheet Settings",
-        closeOnBackdrop: true,
+        closeOnInteractOutside: true,
         closeOnEscape: true,
       },
     );
@@ -204,168 +216,59 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
   const hasSummary = createMemo(() => effectiveColumns().some((col) => col.summary != null));
 
   // #region Sorting
-  const [sorts, setSorts] = createControllableSignal({
-    value: () => local.sorts ?? [],
-    onChange: () => local.onSortsChange,
+  const {
+    sorts,
+    toggleSort,
+    sortIndex: sortIndex,
+    sortedItems,
+  } = useDataSheetSorting<TItem>({
+    sorts: () => local.sorts,
+    onSortsChange: () => local.onSortsChange,
+    items: () => local.items,
+    autoSort: () => local.autoSort,
   });
 
-  function toggleSort(key: string, multiple: boolean): void {
-    const current = sorts();
-    const existing = current.find((s) => s.key === key);
-
-    if (existing) {
-      if (!existing.desc) {
-        // asc → desc
-        const updated = current.map((s) => (s.key === key ? { ...s, desc: true } : s));
-        setSorts(multiple ? updated : [{ key, desc: true }]);
-      } else {
-        // desc → remove
-        const updated = current.filter((s) => s.key !== key);
-        setSorts(multiple ? updated : []);
-      }
-    } else {
-      // none → add asc
-      const newSort: SortingDef = { key, desc: false };
-      setSorts(multiple ? [...current, newSort] : [newSort]);
-    }
-  }
-
-  function getSortDef(key: string): SortingDef | undefined {
+  function getSortDef(key: string) {
     return sorts().find((s) => s.key === key);
   }
 
-  function getSortIndex(key: string): number | undefined {
-    if (sorts().length <= 1) return undefined;
-    const idx = sorts().findIndex((s) => s.key === key);
-    return idx >= 0 ? idx + 1 : undefined;
-  }
-
-  const sortedItems = createMemo(() => {
-    if (!local.autoSort) return local.items ?? [];
-    return applySorting(local.items ?? [], sorts());
-  });
-
   // #region Paging
-  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<TItem>({
+    page: () => local.page,
+    onPageChange: () => local.onPageChange,
+    pageSize: () => local.pageSize,
+    totalPageCount: () => local.totalPageCount,
+    items: () => local.items,
+    sortedItems,
   });
 
   const originalIndexMap = createMemo(() => {
-    const map = new Map<T, number>();
+    const map = new Map<TItem, number>();
     (local.items ?? []).forEach((item, i) => map.set(item, i));
     return map;
   });
 
-  // #region Feature Column Setup (expand/select feature columns common)
-  const hasExpandFeature = () => local.getChildren != null;
-  const hasSelectFeature = () => local.selectMode != null;
-  const hasReorderFeature = () => local.onItemsReorder != null;
-
-  // Feature column width tracking helper
-  function createTrackedWidth(): [() => number, (el: HTMLElement) => void] {
-    const [width, setWidth] = createSignal(0);
-    const register = (el: HTMLElement) => {
-      createResizeObserver(el, () => {
-        setWidth(el.offsetWidth);
-      });
-    };
-    return [width, register];
-  }
-
-  const [expandColWidth, registerExpandColRef] = createTrackedWidth();
-  const [selectColWidth, registerSelectColRef] = createTrackedWidth();
-  const [reorderColWidth, registerReorderColRef] = createTrackedWidth();
-
-  // Feature column left position (used in select/reorder column style)
-  const selectColLeft = createMemo(() => (hasExpandFeature() ? `${expandColWidth()}px` : "0"));
-
-  const reorderColLeft = createMemo(() => {
-    let left = 0;
-    if (hasExpandFeature()) left += expandColWidth();
-    if (hasSelectFeature()) left += selectColWidth();
-    return `${left}px`;
-  });
-
-  // #region ColumnFixing
-  // Column cell refs → for width measurement
-  const columnRefs = new Map<number, HTMLElement>();
-
-  // Measured width of each column
-  const [columnWidths, setColumnWidths] = createSignal<Map<number, number>>(new Map());
-
-  // Total width of feature columns (expand, etc.) — used for fixed column left offset
-  const featureColTotalWidth = createMemo(() => {
-    let w = 0;
-    if (hasExpandFeature()) w += expandColWidth();
-    if (hasSelectFeature()) w += selectColWidth();
-    if (hasReorderFeature()) w += reorderColWidth();
-    return w;
-  });
-
-  // Calculate left position of fixed columns
-  const fixedLeftMap = createMemo(() => {
-    const map = new Map<number, number>();
-    const cols = effectiveColumns();
-    const widths = columnWidths();
-    let left = featureColTotalWidth();
-    for (let c = 0; c < cols.length; c++) {
-      if (!cols[c].fixed) break; // Fixed columns are placed continuously at front
-      map.set(c, left);
-      left += widths.get(c) ?? 0;
-    }
-    return map;
-  });
-
-  // Last fixed column index
-  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;
-    }
-    return last;
-  });
-
-  function getFixedStyle(colIndex: number): string | undefined {
-    const leftVal = fixedLeftMap().get(colIndex);
-    if (leftVal == null) return undefined;
-    return `left: ${leftVal}px`;
-  }
-
-  function isLastFixed(colIndex: number): boolean {
-    return colIndex === lastFixedIndex();
-  }
-
-  // Register ResizeObserver for fixed column cells
-  function registerColumnRef(colIndex: number, el: HTMLElement): void {
-    columnRefs.set(colIndex, el);
-    createResizeObserver(el, () => {
-      setColumnWidths((prev) => {
-        const next = new Map(prev);
-        next.set(colIndex, el.offsetWidth);
-        return next;
-      });
-    });
-  }
+  // #region Fixed Columns
+  const {
+    hasExpandFeature,
+    hasSelectFeature,
+    hasReorderFeature,
+    registerExpandColRef,
+    registerSelectColRef,
+    registerReorderColRef,
+    selectColLeft,
+    reorderColLeft,
+    getFixedStyle,
+    isLastFixed,
+    registerColumnRef,
+  } = useDataSheetFixedColumns<TItem>(
+    {
+      get itemChildren() { return local.itemChildren; },
+      get selectionMode() { return local.selectionMode; },
+      get onItemsReorder() { return local.onItemsReorder; },
+    },
+    effectiveColumns,
+  );
 
   // #region Resizing
   const [resizeIndicatorStyle, setResizeIndicatorStyle] = createSignal<JSX.CSSProperties>({
@@ -453,246 +356,60 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
   });
 
   // #region Expanding
-  const [expandedItems, setExpandedItems] = createControllableSignal({
-    value: () => local.expandedItems ?? [],
-    onChange: () => local.onExpandedItemsChange,
-  });
-
-  function toggleExpand(item: T): void {
-    const current = expandedItems();
-    if (current.includes(item)) {
-      setExpandedItems(current.filter((i) => i !== item));
-    } else {
-      setExpandedItems([...current, item]);
-    }
-  }
-
-  function toggleExpandAll(): void {
-    if (!local.getChildren) return;
-    const indexMap = originalIndexMap();
-    const allExpandable = collectAllExpandable(
-      pagedItems(),
-      local.getChildren,
-      (item) => indexMap.get(item) ?? -1,
+  const { expandedItems, flatItems, toggleExpand, isAllExpanded, toggleExpandAll } =
+    useDataSheetExpansion<TItem>(
+      {
+        get expandedItems() { return local.expandedItems; },
+        get onExpandedItemsChange() { return local.onExpandedItemsChange; },
+        get itemChildren() { return local.itemChildren; },
+      },
+      pagedItems,
+      originalIndexMap,
     );
-    const isAllExpanded = allExpandable.every((item) => expandedItems().includes(item));
-    setExpandedItems(isAllExpanded ? [] : allExpandable);
-  }
 
-  const flatItems = createMemo((): FlatItem<T>[] => {
-    const indexMap = originalIndexMap();
-    return flattenTree(
-      pagedItems(),
-      expandedItems(),
-      local.getChildren,
-      (item) => indexMap.get(item) ?? -1,
-    );
-  });
+  // #region Display
+  const displayItems = flatItems;
 
   // #region Selection
-  const [selectedItems, setSelectedItems] = createControllableSignal({
-    value: () => local.selectedItems ?? [],
-    onChange: () => local.onSelectedItemsChange,
-  });
-
-  const [lastClickedRow, setLastClickedRow] = createSignal<number | null>(null);
-  const [lastClickAction, setLastClickAction] = createSignal<"select" | "deselect">("select");
-
-  function getItemSelectable(item: T): boolean | string {
-    if (!local.isItemSelectable) return true;
-    return local.isItemSelectable(item);
-  }
-
-  function toggleSelect(item: T): void {
-    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(): void {
-    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: number): void {
-    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)));
-    }
-  }
+  const {
+    selection,
+    setSelection,
+    getItemSelectable,
+    toggleSelect,
+    toggleSelectAll,
+    rangeSelect,
+    lastClickedRow,
+    setLastClickedRow,
+  } = useDataSheetSelection<TItem>(
+    {
+      get selectionMode() { return local.selectionMode; },
+      get selection() { return local.selection; },
+      get onSelectionChange() { return local.onSelectionChange; },
+      get isItemSelectable() { return local.isItemSelectable; },
+    },
+    displayItems,
+  );
 
   // #region AutoSelect
-  function selectItem(item: T): void {
+  function selectItem(item: TItem): void {
     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]);
       }
     }
   }
 
   // #region Reorder
-  const [dragState, setDragState] = createSignal<{
-    draggingItem: T;
-    targetItem: T | null;
-    position: "before" | "after" | "inside" | null;
-  } | null>(null);
-
-  function isDescendant(parent: T, child: T): boolean {
-    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;
-    }
-    return false;
-  }
-
-  function onReorderPointerDown(e: PointerEvent, item: T): void {
-    e.preventDefault();
-    const target = e.currentTarget as HTMLElement;
-
-    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) {
-        let foundTarget: T | null = null;
-        let foundPosition: "before" | "after" | "inside" | null = 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;
-
-          // Cannot drop to child items of self
-          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 });
-
-        // Update indicator DOM
-        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");
-            }
-          }
-        }
-
-        // before/after indicator
-        const indicatorEl = tableEl
-          .closest("[data-sheet-scroll]")
-          ?.querySelector("[data-reorder-indicator]") as HTMLElement | null;
-        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]") as HTMLElement;
-
-              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() {
-        const state = dragState();
-        if (state?.targetItem != null && state.position != null) {
-          local.onItemsReorder?.({
-            item: state.draggingItem,
-            targetItem: state.targetItem,
-            position: state.position,
-          } as DataSheetReorderEvent<T>);
-        }
-
-        // Clean up
-        for (const row of rows) {
-          row.removeAttribute("data-dragging");
-          row.removeAttribute("data-drag-over");
-        }
-        const indicatorEl = tableEl
-          .closest("[data-sheet-scroll]")
-          ?.querySelector("[data-reorder-indicator]") as HTMLElement | null;
-        if (indicatorEl) {
-          indicatorEl.style.display = "none";
-        }
-
-        setDragState(null);
-      },
-    });
-  }
+  const { dragState, onReorderPointerDown } = useDataSheetReorder<TItem>(
+    {
+      get onItemsReorder() { return local.onItemsReorder; },
+      get itemChildren() { return local.itemChildren; },
+    },
+    displayItems,
+  );
 
   // #region Keyboard Navigation (move rows with Enter/Shift+Enter)
   function onTableKeyDown(e: KeyboardEvent): void {
@@ -727,18 +444,15 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     targetFocusable.focus();
   }
 
-  // #region Display
-  const displayItems = flatItems;
-
   // Is expand feature column "last fixed" (no regular fixed columns and no select feature)
   const isExpandColLastFixed = () =>
-    hasExpandFeature() && !hasSelectFeature() && !hasReorderFeature() && lastFixedIndex() < 0;
+    hasExpandFeature() && !hasSelectFeature() && !hasReorderFeature() && isLastFixed(-1);
 
   // Is select feature column "last fixed" (no regular fixed columns and select is rightmost feature)
   const isSelectColLastFixed = () =>
-    hasSelectFeature() && !hasReorderFeature() && lastFixedIndex() < 0;
+    hasSelectFeature() && !hasReorderFeature() && isLastFixed(-1);
 
-  const isReorderColLastFixed = () => hasReorderFeature() && lastFixedIndex() < 0;
+  const isReorderColLastFixed = () => hasReorderFeature() && isLastFixed(-1);
 
   // Total header row count + summary row count (used for feature column rowspan)
   const featureHeaderRowspan = createMemo(() => {
@@ -747,36 +461,226 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     return headerRows + summaryRow;
   });
 
-  // Is all expanded
-  const isAllExpanded = createMemo(() => {
-    if (!local.getChildren) return false;
-    const indexMap = originalIndexMap();
-    const allExpandable = collectAllExpandable(
-      pagedItems(),
-      local.getChildren,
-      (item) => indexMap.get(item) ?? -1,
+  // suppress unused variable warning — dragState is used for side effects (DOM mutation in hook)
+  void dragState;
+
+  // #region Sub-render functions
+
+  const { renderHeaderCell } = useDataSheetHeaderCell({
+    effectiveColumns,
+    headerRowTops,
+    getFixedStyle,
+    isLastFixed,
+    registerColumnRef,
+    toggleSort,
+    getSortDef,
+    sortIndex,
+    onResizerPointerdown,
+    onResizerDoubleClick,
+    thClass,
+    fixedClass,
+    sortableThClass,
+    fixedLastClass,
+    thContentClass,
+    resizerClass,
+    sortIconClass,
+  });
+
+  function renderExpandCell(flatItem: FlatItem<TItem>): JSX.Element {
+    return (
+      <td
+        class={twMerge(
+          featureTdClass,
+          fixedClass,
+          "z-[2]",
+          isExpandColLastFixed() ? fixedLastClass : undefined,
+        )}
+        style={{ left: "0" }}
+      >
+        <div class={featureCellBodyWrapperClass}>
+          <For each={Array.from({ length: flatItem.depth })}>
+            {() => (
+              <div class={expandIndentGuideClass}>
+                <div class={expandIndentGuideLineClass} />
+              </div>
+            )}
+          </For>
+          <Show when={flatItem.hasChildren}>
+            <button
+              type="button"
+              class={expandToggleClass}
+              onClick={() => toggleExpand(flatItem.item)}
+            >
+              <Icon
+                icon={IconChevronDown}
+                size="1em"
+                class={clsx(
+                  "transition-transform",
+                  expandedItems().includes(flatItem.item) ? "rotate-0" : "-rotate-90",
+                )}
+              />
+            </button>
+          </Show>
+        </div>
+      </td>
+    );
+  }
+
+  function renderSelectCell(flatItem: FlatItem<TItem>): JSX.Element {
+    const selectable = () => getItemSelectable(flatItem.item);
+    const isSelected = () => selection().includes(flatItem.item);
+    const rowIndex = () => flatItem.row;
+
+    return (
+      <td
+        class={twMerge(
+          featureTdClass,
+          fixedClass,
+          "z-[2]",
+          isSelectColLastFixed() ? fixedLastClass : undefined,
+        )}
+        style={{
+          left: selectColLeft(),
+        }}
+      >
+        <Show
+          when={local.selectionMode === "multiple"}
+          fallback={
+            /* single mode */
+            <Show when={selectable() === true}>
+              <div
+                class={featureCellBodyClickableClass}
+                onClick={() => toggleSelect(flatItem.item)}
+              >
+                <div
+                  class={twMerge(
+                    selectSingleClass,
+                    isSelected()
+                      ? selectSingleSelectedClass
+                      : selectSingleUnselectedClass,
+                  )}
+                >
+                  <Icon icon={IconChevronRight} size="1em" />
+                </div>
+              </div>
+            </Show>
+          }
+        >
+          {/* multi mode */}
+          <div
+            class={featureCellBodyClickableClass}
+            onClick={(e) => {
+              if (e.shiftKey) {
+                rangeSelect(rowIndex());
+              } else {
+                toggleSelect(flatItem.item);
+              }
+              setLastClickedRow(rowIndex());
+            }}
+            title={
+              typeof selectable() === "string"
+                ? (selectable() as string)
+                : undefined
+            }
+          >
+            <Checkbox
+              value={isSelected()}
+              disabled={selectable() !== true}
+              inset
+              class={twMerge(
+                "pointer-events-none",
+                lastClickedRow() === rowIndex()
+                  ? "[&>div]:ring-2 [&>div]:ring-primary-200 dark:[&>div]:ring-primary-700"
+                  : undefined,
+              )}
+            />
+          </div>
+        </Show>
+      </td>
+    );
+  }
+
+  function renderReorderCell(flatItem: FlatItem<TItem>): JSX.Element {
+    return (
+      <td
+        class={twMerge(
+          featureTdClass,
+          fixedClass,
+          "z-[2]",
+          isReorderColLastFixed() ? fixedLastClass : undefined,
+        )}
+        style={{
+          left: reorderColLeft(),
+        }}
+      >
+        <div
+          class={reorderCellWrapperClass}
+          onPointerDown={(e) => onReorderPointerDown(e, flatItem.item)}
+        >
+          <div class={reorderHandleClass}>
+            <Icon icon={IconGripVertical} size="1em" />
+          </div>
+        </div>
+      </td>
     );
+  }
+
+  function renderSummaryRow(): JSX.Element {
     return (
-      allExpandable.length > 0 && allExpandable.every((item) => expandedItems().includes(item))
+      <Show when={hasSummary()}>
+        <tr>
+          {/* Expand feature column summary cell already covered by rowspan, skip */}
+          <For each={effectiveColumns()}>
+            {(col, colIndex) => {
+              const summaryStyle = (): string | undefined => {
+                const parts: string[] = [];
+                parts.push(`top: ${summaryRowTop()}px`);
+                const left = getFixedStyle(colIndex());
+                if (left != null) parts.push(left);
+                return parts.join("; ");
+              };
+
+              return (
+                <th
+                  class={twMerge(
+                    thClass,
+                    summaryThClass,
+                    fixedClass,
+                    col.fixed ? "z-[5]" : "z-[3]",
+                    isLastFixed(colIndex()) ? fixedLastClass : undefined,
+                  )}
+                  style={summaryStyle()}
+                >
+                  <div class={thContentClass}>{col.summary?.()}</div>
+                </th>
+              );
+            }}
+          </For>
+        </tr>
+      </Show>
     );
-  });
+  }
+
+  // #endregion
 
   return (
+    <ColumnsProvider>
+      {local.children}
     <div
-      data-sheet={local.persistKey ?? ""}
+      data-sheet={local.storageKey ?? ""}
       class={twMerge(
         "flex flex-col",
         local.inset ? insetContainerClass : defaultContainerClass,
         local.class,
       )}
     >
-      <Show when={!local.hideConfigBar && (dialog != null || effectivePageCount() > 1)}>
+      <Show when={!local.hideConfigBar && (dialog != null || pageCount() > 1)}>
         <div class={toolbarClass}>
-          <Show when={effectivePageCount() > 1}>
+          <Show when={pageCount() > 1}>
             <Pagination
               page={currentPage()}
               onPageChange={setCurrentPage}
-              totalPageCount={effectivePageCount()}
+              totalPageCount={pageCount()}
               displayPageCount={local.displayPageCount}
               size="sm"
             />
@@ -819,7 +723,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
               <col />
             </Show>
             <For each={effectiveColumns()}>
-              {(col) => <col style={col.width != null ? { width: col.width } : undefined} />}
+              {(col) => <col style={col.width != null ? { width: col.width.replace(/;/g, "") } : undefined} />}
             </For>
           </colgroup>
           <thead>
@@ -876,7 +780,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                       }}
                       ref={registerSelectColRef}
                     >
-                      <Show when={local.selectMode === "multiple"}>
+                      <Show when={local.selectionMode === "multiple"}>
                         <div class={featureCellClickableClass} onClick={() => toggleSelectAll()}>
                           <Checkbox
                             value={(() => {
@@ -885,7 +789,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                                 .filter((item) => getItemSelectable(item) === true);
                               return (
                                 selectableItems.length > 0 &&
-                                selectableItems.every((item) => selectedItems().includes(item))
+                                selectableItems.every((item) => selection().includes(item))
                               );
                             })()}
                             inset
@@ -915,335 +819,35 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                   <For each={row}>
                     {(cell, cellColIndex) => (
                       <Show when={cell}>
-                        {(c) => {
-                          const isSortable = () =>
-                            c().isLastRow &&
-                            c().colIndex != null &&
-                            effectiveColumns()[c().colIndex!].sortable;
-                          const colKey = () =>
-                            c().colIndex != null
-                              ? effectiveColumns()[c().colIndex!].key
-                              : undefined;
-
-                          // Group header fixed status: all columns in colspan range are fixed
-                          const isGroupFixed = (): boolean => {
-                            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;
-                          };
-
-                          // Cell fixed column status (based on colIndex if last row, group-based otherwise)
-                          const isCellFixed = () =>
-                            (c().isLastRow &&
-                              c().colIndex != null &&
-                              effectiveColumns()[c().colIndex!].fixed) ||
-                            isGroupFixed();
-
-                          // Cell's last fixed status
-                          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;
-                          };
-
-                          // Fixed cell left + top inline style
-                          const cellStyle = (): string | undefined => {
-                            const parts: string[] = [];
-                            // top: apply to all th (fix header to top)
-                            const top = headerRowTops()[rowIndex()];
-                            parts.push(`top: ${top}px`);
-                            // left: apply only to fixed columns
-                            if (c().isLastRow && c().colIndex != null) {
-                              const left = getFixedStyle(c().colIndex!);
-                              if (left != null) parts.push(left);
-                              // max-width: apply if explicit width exists (allow column to shrink below content)
-                              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("; ") : undefined;
-                          };
-
-                          return (
-                            <th
-                              class={twMerge(
-                                thClass,
-                                fixedClass,
-                                isSortable() ? sortableThClass : undefined,
-                                isCellFixed() ? "z-[5]" : "z-[3]",
-                                isCellLastFixed() ? fixedLastClass : undefined,
-                              )}
-                              colspan={c().colspan > 1 ? c().colspan : undefined}
-                              rowspan={c().rowspan > 1 ? c().rowspan : undefined}
-                              style={cellStyle()}
-                              title={
-                                c().isLastRow && c().colIndex != null
-                                  ? (effectiveColumns()[c().colIndex!].tooltip ?? c().text)
-                                  : c().text
-                              }
-                              ref={(el: HTMLElement) => {
-                                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);
-                              }}
-                            >
-                              <div class={clsx("flex items-center gap-2", thContentClass)}>
-                                <div class="flex-1">{c().headerContent?.() ?? c().text}</div>
-                                <Show when={isSortable() && colKey()}>
-                                  {(key) => {
-                                    const sortDef = () => getSortDef(key());
-                                    const sortIndex = () => getSortIndex(key());
-                                    return (
-                                      <div class={sortIconClass}>
-                                        <Show when={sortDef()?.desc === false}>
-                                          <Icon icon={IconSortAscending} />
-                                        </Show>
-                                        <Show when={sortDef()?.desc === true}>
-                                          <Icon icon={IconSortDescending} />
-                                        </Show>
-                                        <Show when={sortDef() == null}>
-                                          <Icon
-                                            icon={IconArrowsSort}
-                                            class="opacity-30"
-                                          />
-                                        </Show>
-                                        <Show when={sortIndex()}>
-                                          {(idx) => <sub>{idx()}</sub>}
-                                        </Show>
-                                      </div>
-                                    );
-                                  }}
-                                </Show>
-                              </div>
-                              <Show
-                                when={
-                                  c().isLastRow &&
-                                  c().colIndex != null &&
-                                  effectiveColumns()[c().colIndex!].resizable
-                                }
-                              >
-                                <div
-                                  class={resizerClass}
-                                  onClick={(e) => e.stopPropagation()}
-                                  onPointerDown={(e) =>
-                                    onResizerPointerdown(e, effectiveColumns()[c().colIndex!].key)
-                                  }
-                                  onDblClick={(e) => {
-                                    e.stopPropagation();
-                                    onResizerDoubleClick(effectiveColumns()[c().colIndex!].key);
-                                  }}
-                                />
-                              </Show>
-                            </th>
-                          );
-                        }}
+                        {(c) => renderHeaderCell(c(), cellColIndex(), rowIndex())}
                       </Show>
                     )}
                   </For>
                 </tr>
               )}
             </For>
-            <Show when={hasSummary()}>
-              <tr>
-                {/* Expand feature column summary cell already covered by rowspan, skip */}
-                <For each={effectiveColumns()}>
-                  {(col, colIndex) => {
-                    const summaryStyle = (): string | undefined => {
-                      const parts: string[] = [];
-                      parts.push(`top: ${summaryRowTop()}px`);
-                      const left = getFixedStyle(colIndex());
-                      if (left != null) parts.push(left);
-                      return parts.join("; ");
-                    };
-
-                    return (
-                      <th
-                        class={twMerge(
-                          thClass,
-                          summaryThClass,
-                          fixedClass,
-                          col.fixed ? "z-[5]" : "z-[3]",
-                          isLastFixed(colIndex()) ? fixedLastClass : undefined,
-                        )}
-                        style={summaryStyle()}
-                      >
-                        <div class={thContentClass}>{col.summary?.()}</div>
-                      </th>
-                    );
-                  }}
-                </For>
-              </tr>
-            </Show>
+            {renderSummaryRow()}
           </thead>
           <tbody>
             <For each={displayItems()}>
               {(flat) => (
                 <tr
-                  data-selected={selectedItems().includes(flat.item) ? "" : undefined}
+                  data-selected={selection().includes(flat.item) ? "" : undefined}
                   onClick={() => {
-                    if (local.autoSelect === "click") {
+                    if (local.autoSelect) {
                       selectItem(flat.item);
                     }
                   }}
-                  class={local.autoSelect === "click" ? "cursor-pointer" : undefined}
+                  class={clsx(trRowClass, local.autoSelect && "cursor-pointer")}
                 >
-                  {/* Expand feature column body cell */}
                   <Show when={hasExpandFeature()}>
-                    <td
-                      class={twMerge(
-                        featureTdClass,
-                        fixedClass,
-                        "z-[2]",
-                        isExpandColLastFixed() ? fixedLastClass : undefined,
-                      )}
-                      style={{ left: "0" }}
-                    >
-                      <div class={featureCellBodyWrapperClass}>
-                        <For each={Array.from({ length: flat.depth })}>
-                          {() => (
-                            <div class={expandIndentGuideClass}>
-                              <div class={expandIndentGuideLineClass} />
-                            </div>
-                          )}
-                        </For>
-                        <Show when={flat.hasChildren}>
-                          <button
-                            type="button"
-                            class={expandToggleClass}
-                            onClick={() => toggleExpand(flat.item)}
-                          >
-                            <Icon
-                              icon={IconChevronDown}
-                              size="1em"
-                              class={clsx(
-                                "transition-transform",
-                                expandedItems().includes(flat.item) ? "rotate-0" : "-rotate-90",
-                              )}
-                            />
-                          </button>
-                        </Show>
-                      </div>
-                    </td>
+                    {renderExpandCell(flat)}
                   </Show>
-                  {/* Select feature column body cell */}
                   <Show when={hasSelectFeature()}>
-                    {(() => {
-                      const selectable = () => getItemSelectable(flat.item);
-                      const isSelected = () => selectedItems().includes(flat.item);
-                      const rowIndex = () => flat.row;
-
-                      return (
-                        <td
-                          class={twMerge(
-                            featureTdClass,
-                            fixedClass,
-                            "z-[2]",
-                            isSelectColLastFixed() ? fixedLastClass : undefined,
-                          )}
-                          style={{
-                            left: selectColLeft(),
-                          }}
-                        >
-                          <Show
-                            when={local.selectMode === "multiple"}
-                            fallback={
-                              /* single mode */
-                              <Show when={selectable() === true}>
-                                <div
-                                  class={featureCellBodyClickableClass}
-                                  onClick={() => toggleSelect(flat.item)}
-                                >
-                                  <div
-                                    class={twMerge(
-                                      selectSingleClass,
-                                      isSelected()
-                                        ? selectSingleSelectedClass
-                                        : selectSingleUnselectedClass,
-                                    )}
-                                  >
-                                    <Icon icon={IconChevronRight} size="1em" />
-                                  </div>
-                                </div>
-                              </Show>
-                            }
-                          >
-                            {/* multi mode */}
-                            <div
-                              class={featureCellBodyClickableClass}
-                              onClick={(e) => {
-                                if (e.shiftKey) {
-                                  rangeSelect(rowIndex());
-                                } else {
-                                  toggleSelect(flat.item);
-                                }
-                                setLastClickedRow(rowIndex());
-                              }}
-                              title={
-                                typeof selectable() === "string"
-                                  ? (selectable() as string)
-                                  : undefined
-                              }
-                            >
-                              <Checkbox
-                                value={isSelected()}
-                                disabled={selectable() !== true}
-                                inset
-                                class={twMerge(
-                                  "pointer-events-none",
-                                  lastClickedRow() === rowIndex()
-                                    ? "[&>div]:ring-2 [&>div]:ring-primary-200 dark:[&>div]:ring-primary-700"
-                                    : undefined,
-                                )}
-                              />
-                            </div>
-                          </Show>
-                        </td>
-                      );
-                    })()}
+                    {renderSelectCell(flat)}
                   </Show>
-                  {/* Drag reorder feature column body cell */}
                   <Show when={hasReorderFeature()}>
-                    <td
-                      class={twMerge(
-                        featureTdClass,
-                        fixedClass,
-                        "z-[2]",
-                        isReorderColLastFixed() ? fixedLastClass : undefined,
-                      )}
-                      style={{
-                        left: reorderColLeft(),
-                      }}
-                    >
-                      <div
-                        class={reorderCellWrapperClass}
-                        onPointerDown={(e) => onReorderPointerDown(e, flat.item)}
-                      >
-                        <div class={reorderHandleClass}>
-                          <Icon icon={IconGripVertical} size="1em" />
-                        </div>
-                      </div>
-                    </td>
+                    {renderReorderCell(flat)}
                   </Show>
                   <For each={effectiveColumns()}>
                     {(col, colIndex) => (
@@ -1258,7 +862,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                         style={
                           [
                             getFixedStyle(colIndex()),
-                            col.width != null ? `max-width: ${col.width}` : undefined,
+                            col.width != null ? `max-width: ${col.width.replace(/;/g, "")}` : undefined,
                             local.cellStyle?.(flat.item, col.key),
                           ]
                             .filter(Boolean)
@@ -1283,7 +887,12 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
         <div data-reorder-indicator class={reorderIndicatorClass} style={{ display: "none" }} />
       </div>
     </div>
+    </ColumnsProvider>
   );
 };
 
-DataSheet.Column = DataSheetColumn;
+//#region Export
+export const DataSheet = Object.assign(DataSheetInner, {
+  Column: DataSheetColumn,
+});
+//#endregion