@simplysm/solid 13.0.75 → 13.0.77

package/src/components/data/sheet/{types.ts → DataSheet.types.ts}

@@ -4,7 +4,7 @@ export interface DataSheetProps<TItem> {
   // Data
   items?: TItem[];
   // Config
-  persistKey?: string;
+  storageKey?: string;
   hideConfigBar?: boolean;
   inset?: boolean;
   contentStyle?: JSX.CSSProperties | string;
@@ -18,20 +18,26 @@ export interface DataSheetProps<TItem> {
   page?: number;
   onPageChange?: (page: number) => void;
   totalPageCount?: number;
-  itemsPerPage?: number;
+  pageSize?: number;
   displayPageCount?: number;
 
   // Selection
-  selectMode?: "single" | "multiple";
-  selectedItems?: TItem[];
-  onSelectedItemsChange?: (items: TItem[]) => void;
-  autoSelect?: "click";
+  selectionMode?: "single" | "multiple";
+  selection?: TItem[];
+  onSelectionChange?: (items: TItem[]) => void;
+  autoSelect?: boolean;
+  /**
+   * Determines if an item can be selected.
+   * - `true` → selectable
+   * - `false` → not selectable
+   * - `string` → not selectable, string shown as tooltip explaining why
+   */
   isItemSelectable?: (item: TItem) => boolean | string;
 
   // Tree expansion
   expandedItems?: TItem[];
   onExpandedItemsChange?: (items: TItem[]) => void;
-  getChildren?: (item: TItem, index: number) => TItem[] | undefined;
+  itemChildren?: (item: TItem, index: number) => TItem[] | undefined;
 
   // Cell styling
   cellClass?: (item: TItem, colKey: string) => string | undefined;
@@ -88,7 +94,6 @@ export interface DataSheetConfigColumn {
 }
 
 export interface DataSheetColumnDef<TItem> {
-  __type: "sheet-column";
   key: string;
   header: string[];
   headerContent?: () => JSX.Element;

package/src/components/data/sheet/{sheetUtils.ts → DataSheet.utils.ts}

@@ -1,5 +1,5 @@
-import type { DataSheetColumnDef, FlatItem, HeaderDef, SortingDef } from "./types";
-import { objGetChainValue } from "@simplysm/core-common";
+import type { DataSheetColumnDef, FlatItem, HeaderDef, SortingDef } from "./DataSheet.types";
+import { obj } from "@simplysm/core-common";
 
 export function normalizeHeader(header?: string | string[]): string[] {
   if (header == null) return [""];
@@ -102,10 +102,10 @@ function isSameGroup(
 export function flattenTree<TNode>(
   items: TNode[],
   expandedItems: TNode[],
-  getChildren?: (item: TNode, index: number) => TNode[] | undefined,
+  itemChildren?: (item: TNode, index: number) => TNode[] | undefined,
   getOriginalIndex?: (item: TNode) => number,
 ): FlatItem<TNode>[] {
-  if (!getChildren) {
+  if (!itemChildren) {
     return items.map((item, i) => ({
       item,
       index: getOriginalIndex ? getOriginalIndex(item) : i,
@@ -122,7 +122,7 @@ export function flattenTree<TNode>(
     for (let localIdx = 0; localIdx < list.length; localIdx++) {
       const item = list[localIdx];
       const index = depth === 0 && getOriginalIndex ? getOriginalIndex(item) : localIdx;
-      const children = getChildren!(item, index);
+      const children = itemChildren!(item, index);
       const hasChildren = children != null && children.length > 0;
       result.push({ item, index, row, depth, hasChildren, parent });
       row++;
@@ -139,7 +139,7 @@ export function flattenTree<TNode>(
 
 export function collectAllExpandable<TItem>(
   items: TItem[],
-  getChildren: (item: TItem, index: number) => TItem[] | undefined,
+  itemChildren: (item: TItem, index: number) => TItem[] | undefined,
   getOriginalIndex?: (item: TItem) => number,
 ): TItem[] {
   const result: TItem[] = [];
@@ -148,7 +148,7 @@ export function collectAllExpandable<TItem>(
     for (let localIdx = 0; localIdx < list.length; localIdx++) {
       const item = list[localIdx];
       const index = depth === 0 && getOriginalIndex ? getOriginalIndex(item) : localIdx;
-      const children = getChildren(item, index);
+      const children = itemChildren(item, index);
       if (children != null && children.length > 0) {
         result.push(item);
         walk(children, depth + 1);
@@ -166,7 +166,7 @@ export function applySorting<TItem>(items: TItem[], sorts: SortingDef[]): TItem[
   let result = [...items];
   for (const sort of [...sorts].reverse()) {
     const selector = (item: TItem) =>
-      objGetChainValue(item, sort.key) as string | number | undefined;
+      obj.getChainValue(item, sort.key) as string | number | undefined;
     result = sort.desc ? result.orderByDesc(selector) : result.orderBy(selector);
   }
   return result;

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

@@ -1,33 +1,11 @@
 import type { JSX } from "solid-js";
-import type { DataSheetColumnDef, DataSheetColumnProps } from "./types";
-import { normalizeHeader } from "./sheetUtils";
+import { createSlots } from "../../../helpers/createSlots";
+import type { DataSheetColumnProps } from "./DataSheet.types";
 
-export function isDataSheetColumnDef(value: unknown): value is DataSheetColumnDef<unknown> {
-  return (
-    value != null &&
-    typeof value === "object" &&
-    (value as Record<string, unknown>)["__type"] === "sheet-column"
-  );
-}
+const [SlotComponent, createColumnSlotsAccessor] = createSlots<DataSheetColumnProps<any>>();
 
-/* eslint-disable solid/reactivity -- plain object return pattern does not require reactive context */
-export function DataSheetColumn<TItem>(props: DataSheetColumnProps<TItem>): JSX.Element {
-  return {
-    __type: "sheet-column",
-    key: props.key,
-    header: normalizeHeader(props.header),
-    headerContent: props.headerContent,
-    headerStyle: props.headerStyle,
-    summary: props.summary,
-    tooltip: props.tooltip,
-    cell: props.children,
-    class: props.class,
-    fixed: props.fixed ?? false,
-    hidden: props.hidden ?? false,
-    collapse: props.collapse ?? false,
-    width: props.width,
-    sortable: props.sortable ?? true,
-    resizable: props.resizable ?? true,
-  } as unknown as JSX.Element;
+function DataSheetColumn<TItem>(props: DataSheetColumnProps<TItem>): JSX.Element {
+  return SlotComponent(props as DataSheetColumnProps<any>);
 }
-/* eslint-enable solid/reactivity */
+
+export { DataSheetColumn, createColumnSlotsAccessor };

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

@@ -1,24 +1,19 @@
 import { type Component } from "solid-js";
 import { createStore, reconcile } from "solid-js/store";
 import clsx from "clsx";
-import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
 import type {
   DataSheetConfig,
   DataSheetConfigColumn,
   DataSheetConfigColumnInfo,
   DataSheetReorderEvent,
-} from "./types";
+} from "./DataSheet.types";
 import { DataSheet } from "./DataSheet";
 import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { TextInput } from "../../form-control/field/TextInput";
 import { Button } from "../../form-control/Button";
-import { borderSubtle } from "../../../styles/tokens.styles";
-import { useI18n } from "../../../providers/i18n/I18nContext";
-
-const containerClass = clsx("flex flex-col", "gap-2", "p-2");
-const sheetWrapperClass = clsx("rounded border", borderSubtle);
-const footerClass = clsx("flex justify-between", "gap-2");
-const footerActionsClass = clsx("flex gap-2");
+import { border } from "../../../styles/base.styles";
+import { pad } from "../../../styles/control.styles";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
 
 interface EditColumnItem {
   key: string;
@@ -31,13 +26,12 @@ interface EditColumnItem {
 export interface DataSheetConfigDialogProps {
   columnInfos: DataSheetConfigColumnInfo[];
   currentConfig: DataSheetConfig;
+  close?: (result?: DataSheetConfig) => void;
 }
 
 export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (props) => {
-  const dialog = useDialogInstance<DataSheetConfig>();
   const i18n = useI18n();
 
-  /* eslint-disable solid/reactivity -- dialog props are static values only used once at mount time */
   const initialItems: EditColumnItem[] = props.columnInfos
     .filter((info) => !info.collapse)
     .map((info) => {
@@ -55,7 +49,6 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
       const orderB = props.currentConfig.columnRecord?.[b.key]?.displayOrder ?? Infinity;
       return orderA - orderB;
     });
-  /* eslint-enable solid/reactivity */
 
   const [editItems, setEditItems] = createStore<EditColumnItem[]>(initialItems);
 
@@ -89,7 +82,8 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
 
     for (let i = 0; i < editItems.length; i++) {
       const item = editItems[i];
-      const info = props.columnInfos.find((c) => c.key === item.key)!;
+      const info = props.columnInfos.find((c) => c.key === item.key);
+      if (!info) continue;
 
       const entry: DataSheetConfigColumn = {};
 
@@ -103,22 +97,22 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
       }
     }
 
-    dialog?.close({ columnRecord });
+    props.close?.({ columnRecord });
   }
 
   function handleReset(): void {
     if (!confirm(i18n.t("dataSheetConfigDialog.resetConfirm"))) return;
-    dialog?.close({ columnRecord: {} });
+    props.close?.({ columnRecord: {} });
   }
 
   return (
-    <div class={containerClass}>
-      <div class={sheetWrapperClass}>
+    <div class="flex flex-col gap-2 p-2">
+      <div class={clsx("rounded border", border.subtle)}>
         <DataSheet items={editItems} inset hideConfigBar onItemsReorder={handleReorder}>
           <DataSheet.Column<EditColumnItem>
             key="header"
             header={i18n.t("dataSheetConfigDialog.column")}
-            class="px-2 py-1"
+            class={pad.default}
             sortable={false}
           >
             {(ctx) => ctx.item.headerText}
@@ -154,12 +148,12 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
         </DataSheet>
       </div>
 
-      <div class={footerClass}>
+      <div class="flex justify-between gap-2">
         <Button onClick={handleReset} theme="warning" variant="solid">
           {i18n.t("dataSheetConfigDialog.reset")}
         </Button>
-        <div class={footerActionsClass}>
-          <Button onClick={() => dialog?.close(undefined)}>{i18n.t("dataSheetConfigDialog.cancel")}</Button>
+        <div class="flex gap-2">
+          <Button onClick={() => props.close?.(undefined)}>{i18n.t("dataSheetConfigDialog.cancel")}</Button>
           <Button onClick={handleOk} theme="primary" variant="solid">
             {i18n.t("dataSheetConfigDialog.confirm")}
           </Button>

package/src/components/data/sheet/hooks/useDataSheetExpansion.ts

@@ -0,0 +1,85 @@
+import { createMemo, type Accessor } from "solid-js";
+import type { FlatItem } from "../DataSheet.types";
+import { collectAllExpandable, flattenTree } from "../DataSheet.utils";
+import { createControllableSignal } from "../../../../hooks/createControllableSignal";
+
+export interface UseDataSheetExpansionProps<TItem> {
+  expandedItems?: TItem[];
+  onExpandedItemsChange?: (items: TItem[]) => void;
+  itemChildren?: (item: TItem, index: number) => TItem[] | undefined;
+}
+
+export interface UseDataSheetExpansionReturn<TItem> {
+  expandedItems: Accessor<TItem[]>;
+  setExpandedItems: (newValue: TItem[] | ((prev: TItem[]) => TItem[])) => TItem[];
+  flatItems: Accessor<FlatItem<TItem>[]>;
+  toggleExpand: (item: TItem) => void;
+  isAllExpanded: Accessor<boolean>;
+  toggleExpandAll: () => void;
+}
+
+export function useDataSheetExpansion<TItem>(
+  props: UseDataSheetExpansionProps<TItem>,
+  pagedItems: Accessor<TItem[]>,
+  originalIndexMap: Accessor<Map<TItem, number>>,
+): UseDataSheetExpansionReturn<TItem> {
+  const [expandedItems, setExpandedItems] = createControllableSignal({
+    value: () => props.expandedItems ?? [],
+    onChange: () => props.onExpandedItemsChange,
+  });
+
+  function toggleExpand(item: TItem): void {
+    const current = expandedItems();
+    if (current.includes(item)) {
+      setExpandedItems(current.filter((i) => i !== item));
+    } else {
+      setExpandedItems([...current, item]);
+    }
+  }
+
+  function toggleExpandAll(): void {
+    if (!props.itemChildren) return;
+    const indexMap = originalIndexMap();
+    const allExpandable = collectAllExpandable(
+      pagedItems(),
+      props.itemChildren,
+      (item) => indexMap.get(item) ?? -1,
+    );
+    const isAllCurrentlyExpanded = allExpandable.every((item) =>
+      expandedItems().includes(item),
+    );
+    setExpandedItems(isAllCurrentlyExpanded ? [] : allExpandable);
+  }
+
+  const flatItems = createMemo((): FlatItem<TItem>[] => {
+    const indexMap = originalIndexMap();
+    return flattenTree(
+      pagedItems(),
+      expandedItems(),
+      props.itemChildren,
+      (item) => indexMap.get(item) ?? -1,
+    );
+  });
+
+  const isAllExpanded = createMemo(() => {
+    if (!props.itemChildren) return false;
+    const indexMap = originalIndexMap();
+    const allExpandable = collectAllExpandable(
+      pagedItems(),
+      props.itemChildren,
+      (item) => indexMap.get(item) ?? -1,
+    );
+    return (
+      allExpandable.length > 0 && allExpandable.every((item) => expandedItems().includes(item))
+    );
+  });
+
+  return {
+    expandedItems,
+    setExpandedItems,
+    flatItems,
+    toggleExpand,
+    isAllExpanded,
+    toggleExpandAll,
+  };
+}

package/src/components/data/sheet/hooks/useDataSheetFixedColumns.ts

@@ -0,0 +1,131 @@
+import { createMemo, createSignal, type Accessor } from "solid-js";
+import { createResizeObserver } from "@solid-primitives/resize-observer";
+import type { DataSheetColumnDef, DataSheetReorderEvent } from "../DataSheet.types";
+
+export interface UseDataSheetFixedColumnsProps<TItem> {
+  itemChildren?: (item: TItem, index: number) => TItem[] | undefined;
+  selectionMode?: "single" | "multiple";
+  onItemsReorder?: (event: DataSheetReorderEvent<TItem>) => void;
+}
+
+export function useDataSheetFixedColumns<TItem>(
+  props: UseDataSheetFixedColumnsProps<TItem>,
+  effectiveColumns: Accessor<DataSheetColumnDef<TItem>[]>
+) {
+  // Feature column presence checks
+  const hasExpandFeature = () => props.itemChildren != null;
+  const hasSelectFeature = () => props.selectionMode != null;
+  const hasReorderFeature = () => props.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`;
+  });
+
+  // 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;
+      });
+    });
+  }
+
+  return {
+    // Feature column tracking
+    hasExpandFeature,
+    hasSelectFeature,
+    hasReorderFeature,
+    expandColWidth,
+    selectColWidth,
+    reorderColWidth,
+    registerExpandColRef,
+    registerSelectColRef,
+    registerReorderColRef,
+    selectColLeft,
+    reorderColLeft,
+
+    // Fixed columns
+    columnRefs,
+    columnWidths,
+    featureColTotalWidth,
+    fixedLeftMap,
+    lastFixedIndex,
+    getFixedStyle,
+    isLastFixed,
+    registerColumnRef,
+  };
+}

package/src/components/data/sheet/hooks/useDataSheetHeaderCell.tsx

@@ -0,0 +1,168 @@
+import type { JSX } from "solid-js";
+import { Show } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { Icon } from "../../../display/Icon";
+import { IconArrowsSort, IconSortAscending, IconSortDescending } from "@tabler/icons-solidjs";
+import type { HeaderDef, DataSheetColumnDef } from "../DataSheet.types";
+
+export interface UseDataSheetHeaderCellProps<TItem> {
+  effectiveColumns: () => DataSheetColumnDef<TItem>[];
+  headerRowTops: () => number[];
+  getFixedStyle: (colIndex: number) => string | undefined;
+  isLastFixed: (colIndex: number) => boolean;
+  registerColumnRef: (colIndex: number, el: HTMLElement) => void;
+  toggleSort: (key: string, multi: boolean) => void;
+  getSortDef: (key: string) => { desc: boolean } | undefined;
+  sortIndex: (key: string) => number | undefined;
+  onResizerPointerdown: (e: PointerEvent, key: string) => void;
+  onResizerDoubleClick: (key: string) => void;
+  thClass: string;
+  fixedClass: string;
+  sortableThClass: string;
+  fixedLastClass: string;
+  thContentClass: string;
+  resizerClass: string;
+  sortIconClass: string;
+}
+
+export function useDataSheetHeaderCell<TItem>(props: UseDataSheetHeaderCellProps<TItem>) {
+  function renderHeaderCell(header: HeaderDef, colIndex: number, rowIndex: number): JSX.Element {
+    const isSortable = () =>
+      header.isLastRow &&
+      header.colIndex != null &&
+      props.effectiveColumns()[header.colIndex].sortable;
+    const colKey = () =>
+      header.colIndex != null
+        ? props.effectiveColumns()[header.colIndex].key
+        : undefined;
+
+    const isGroupFixed = (): boolean => {
+      if (header.isLastRow) return false;
+      const start = colIndex;
+      const span = header.colspan;
+      const cols = props.effectiveColumns();
+      for (let i = start; i < start + span && i < cols.length; i++) {
+        if (!cols[i].fixed) return false;
+      }
+      return true;
+    };
+
+    const isCellFixed = () =>
+      (header.isLastRow &&
+        header.colIndex != null &&
+        props.effectiveColumns()[header.colIndex].fixed) ||
+      isGroupFixed();
+
+    const isCellLastFixed = () => {
+      if (header.isLastRow && header.colIndex != null)
+        return props.isLastFixed(header.colIndex);
+      if (isGroupFixed()) {
+        const lastCol = colIndex + header.colspan - 1;
+        return props.isLastFixed(lastCol);
+      }
+      return false;
+    };
+
+    const cellStyle = (): string | undefined => {
+      const parts: string[] = [];
+      const top = props.headerRowTops()[rowIndex];
+      parts.push(`top: ${top}px`);
+      if (header.isLastRow && header.colIndex != null) {
+        const left = props.getFixedStyle(header.colIndex);
+        if (left != null) parts.push(left);
+        const col = props.effectiveColumns()[header.colIndex];
+        if (col.width != null) parts.push(`max-width: ${col.width.replace(/;/g, "")}`);
+      } else if (isGroupFixed()) {
+        const left = props.getFixedStyle(colIndex);
+        if (left != null) parts.push(left);
+      }
+      return parts.length > 0 ? parts.join("; ") : undefined;
+    };
+
+    return (
+      <th
+        class={twMerge(
+          props.thClass,
+          props.fixedClass,
+          isSortable() ? props.sortableThClass : undefined,
+          isCellFixed() ? "z-[5]" : "z-[3]",
+          isCellLastFixed() ? props.fixedLastClass : undefined,
+        )}
+        colspan={header.colspan > 1 ? header.colspan : undefined}
+        rowspan={header.rowspan > 1 ? header.rowspan : undefined}
+        style={cellStyle()}
+        title={
+          header.isLastRow && header.colIndex != null
+            ? (props.effectiveColumns()[header.colIndex].tooltip ?? header.text)
+            : header.text
+        }
+        ref={(el: HTMLElement) => {
+          if (
+            header.isLastRow &&
+            header.colIndex != null &&
+            props.effectiveColumns()[header.colIndex].fixed
+          ) {
+            props.registerColumnRef(header.colIndex, el);
+          }
+        }}
+        onClick={(e) => {
+          if (!isSortable()) return;
+          const key = colKey();
+          if (key == null) return;
+          props.toggleSort(key, e.shiftKey || e.ctrlKey);
+        }}
+      >
+        <div class={clsx("flex items-center gap-2", props.thContentClass)}>
+          <div class="flex-1">{header.headerContent?.() ?? header.text}</div>
+          <Show when={isSortable() && colKey()}>
+            {(key) => {
+              const sortDef = () => props.getSortDef(key());
+              const sortIdx = () => props.sortIndex(key());
+              return (
+                <div class={props.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={sortIdx()}>
+                    {(idx) => <sub>{idx()}</sub>}
+                  </Show>
+                </div>
+              );
+            }}
+          </Show>
+        </div>
+        <Show
+          when={
+            header.isLastRow &&
+            header.colIndex != null &&
+            props.effectiveColumns()[header.colIndex].resizable
+          }
+        >
+          <div
+            class={props.resizerClass}
+            onClick={(e) => e.stopPropagation()}
+            onPointerDown={(e) =>
+              props.onResizerPointerdown(e, props.effectiveColumns()[header.colIndex!].key)
+            }
+            onDblClick={(e) => {
+              e.stopPropagation();
+              props.onResizerDoubleClick(props.effectiveColumns()[header.colIndex!].key);
+            }}
+          />
+        </Show>
+      </th>
+    );
+  }
+
+  return { renderHeaderCell };
+}

package/src/components/data/sheet/hooks/useDataSheetPaging.ts

@@ -0,0 +1,51 @@
+import { createMemo, type Accessor } from "solid-js";
+import { createControllableSignal } from "../../../../hooks/createControllableSignal";
+
+export interface UseDataSheetPagingOptions<TItem> {
+  page: Accessor<number | undefined>;
+  onPageChange: Accessor<((page: number) => void) | undefined>;
+  pageSize: Accessor<number | undefined>;
+  totalPageCount: Accessor<number | undefined>;
+  items: Accessor<TItem[] | undefined>;
+  sortedItems: Accessor<TItem[]>;
+}
+
+export interface UseDataSheetPagingReturn<TItem> {
+  currentPage: Accessor<number>;
+  setCurrentPage: (newValue: number | ((prev: number) => number)) => number;
+  pageCount: Accessor<number>;
+  pagedItems: Accessor<TItem[]>;
+}
+
+export function useDataSheetPaging<TItem>(
+  options: UseDataSheetPagingOptions<TItem>,
+): UseDataSheetPagingReturn<TItem> {
+  const [currentPage, setCurrentPage] = createControllableSignal({
+    value: () => options.page() ?? 1,
+    onChange: () => options.onPageChange(),
+  });
+
+  const pageCount = createMemo(() => {
+    const ipp = options.pageSize();
+    if (ipp != null && ipp !== 0 && (options.items() ?? []).length > 0) {
+      return Math.ceil((options.items() ?? []).length / ipp);
+    }
+    return options.totalPageCount() ?? 0;
+  });
+
+  const pagedItems = createMemo(() => {
+    const ipp = options.pageSize();
+    if (ipp == null || ipp === 0) return options.sortedItems();
+    if ((options.items() ?? []).length <= 0) return options.sortedItems();
+
+    const page = Math.max(1, currentPage());
+    return options.sortedItems().slice((page - 1) * ipp, page * ipp);
+  });
+
+  return {
+    currentPage,
+    setCurrentPage,
+    pageCount,
+    pagedItems,
+  };
+}