@simplysm/solid 13.0.74 → 13.0.76

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

@@ -1,5 +1,4 @@
 import {
-  children,
   createMemo,
   createSignal,
   For,
@@ -22,25 +21,22 @@ import {
 } 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";
+import { DataSheetColumn, createColumnSlotsAccessor } from "./DataSheetColumn";
+import { DataSheetConfigDialog } from "./DataSheetConfigDialog";
+import { buildHeaderTable, normalizeHeader } from "./sheetUtils";
 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 +70,25 @@ 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";
 
 interface DataSheetComponent {
   <T>(props: DataSheetProps<T>): JSX.Element;
   Column: typeof DataSheetColumn;
+  ConfigDialog: typeof DataSheetConfigDialog;
 }
 
-export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
+const DataSheetInner = <T,>(props: DataSheetProps<T>) => {
   const [local] = splitProps(props, [
     "items",
-    "persistKey",
+    "storageKey",
     "hideConfigBar",
     "inset",
     "contentStyle",
@@ -94,16 +98,16 @@ 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",
+    "itemSelectable",
     "cellClass",
     "cellStyle",
     "onItemsReorder",
@@ -115,18 +119,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<T> => ({
+          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<T>) => 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 +186,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 +203,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,68 +223,30 @@ 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<T>({
+    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<T>({
+    page: () => local.page,
+    onPageChange: () => local.onPageChange,
+    pageSize: () => local.pageSize,
+    totalPageCount: () => local.totalPageCount,
+    items: () => local.items,
+    sortedItems,
   });
 
   const originalIndexMap = createMemo(() => {
@@ -274,98 +255,27 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     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<T>(
+    {
+      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 +363,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<T>(
+      {
+        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<T>(
+    {
+      get selectionMode() { return local.selectionMode; },
+      get selection() { return local.selection; },
+      get onSelectionChange() { return local.onSelectionChange; },
+      get itemSelectable() { return local.itemSelectable; },
+    },
+    displayItems,
+  );
 
   // #region AutoSelect
   function selectItem(item: T): 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<T>(
+    {
+      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 +451,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 +468,27 @@ 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,
-    );
-    return (
-      allExpandable.length > 0 && allExpandable.every((item) => expandedItems().includes(item))
-    );
-  });
+  // suppress unused variable warning — dragState is used for side effects (DOM mutation in hook)
+  void dragState;
 
   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 +531,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 +588,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 +597,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
@@ -967,7 +679,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                               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}`);
+                              if (col.width != null) parts.push(`max-width: ${col.width.replace(/;/g, "")}`);
                             } else if (isGroupFixed()) {
                               const left = getFixedStyle(cellColIndex());
                               if (left != null) parts.push(left);
@@ -1013,7 +725,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                                 <Show when={isSortable() && colKey()}>
                                   {(key) => {
                                     const sortDef = () => getSortDef(key());
-                                    const sortIndex = () => getSortIndex(key());
+                                    const sortIdx = () => sortIndex(key());
                                     return (
                                       <div class={sortIconClass}>
                                         <Show when={sortDef()?.desc === false}>
@@ -1028,7 +740,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                                             class="opacity-30"
                                           />
                                         </Show>
-                                        <Show when={sortIndex()}>
+                                        <Show when={sortIdx()}>
                                           {(idx) => <sub>{idx()}</sub>}
                                         </Show>
                                       </div>
@@ -1100,13 +812,13 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
             <For each={displayItems()}>
               {(flat) => (
                 <tr
-                  data-selected={selectedItems().includes(flat.item) ? "" : undefined}
+                  data-selected={selection().includes(flat.item) ? "" : undefined}
                   onClick={() => {
                     if (local.autoSelect === "click") {
                       selectItem(flat.item);
                     }
                   }}
-                  class={local.autoSelect === "click" ? "cursor-pointer" : undefined}
+                  class={clsx(trRowClass, local.autoSelect === "click" && "cursor-pointer")}
                 >
                   {/* Expand feature column body cell */}
                   <Show when={hasExpandFeature()}>
@@ -1150,7 +862,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                   <Show when={hasSelectFeature()}>
                     {(() => {
                       const selectable = () => getItemSelectable(flat.item);
-                      const isSelected = () => selectedItems().includes(flat.item);
+                      const isSelected = () => selection().includes(flat.item);
                       const rowIndex = () => flat.row;
 
                       return (
@@ -1166,7 +878,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                           }}
                         >
                           <Show
-                            when={local.selectMode === "multiple"}
+                            when={local.selectionMode === "multiple"}
                             fallback={
                               /* single mode */
                               <Show when={selectable() === true}>
@@ -1258,7 +970,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 +995,14 @@ 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,
+  ConfigDialog: DataSheetConfigDialog,
+}) as unknown as DataSheetComponent;
+export { DataSheetConfigDialog };
+//#endregion