@zvndev/yable-react 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -10,6 +10,37 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React3__default = /*#__PURE__*/_interopDefault(React3);
 
 // src/index.ts
+var YableContext = React3.createContext({});
+function useYableDefaults() {
+  return React3.useContext(YableContext);
+}
+function YableProvider({
+  children,
+  defaultColumnDef,
+  striped,
+  stickyHeader,
+  bordered,
+  compact,
+  theme,
+  direction,
+  ariaLabel
+}) {
+  const tableProps = {};
+  if (striped !== void 0) tableProps.striped = striped;
+  if (stickyHeader !== void 0) tableProps.stickyHeader = stickyHeader;
+  if (bordered !== void 0) tableProps.bordered = bordered;
+  if (compact !== void 0) tableProps.compact = compact;
+  if (theme !== void 0) tableProps.theme = theme;
+  if (direction !== void 0) tableProps.direction = direction;
+  if (ariaLabel !== void 0) tableProps.ariaLabel = ariaLabel;
+  const value = {
+    tableProps: Object.keys(tableProps).length > 0 ? tableProps : void 0,
+    defaultColumnDef
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(YableContext.Provider, { value, children });
+}
+
+// src/useTable.ts
 function shallowEqual(a, b) {
   if (a === b) return true;
   const keysA = Object.keys(a);
@@ -22,6 +53,17 @@ function shallowEqual(a, b) {
   return true;
 }
 function useTable(options) {
+  const providerDefaults = useYableDefaults();
+  const optionsWithDefaults = React3.useMemo(() => {
+    if (!providerDefaults.defaultColumnDef) return options;
+    return {
+      ...options,
+      defaultColumnDef: {
+        ...providerDefaults.defaultColumnDef,
+        ...options.defaultColumnDef
+      }
+    };
+  }, [options, providerDefaults.defaultColumnDef]);
   const [state, setState] = React3.useState(() => ({
     sorting: [],
     columnFilters: [],
@@ -61,14 +103,14 @@ function useTable(options) {
   }));
   const stateRef = React3.useRef(state);
   stateRef.current = state;
-  const prevOptionsRef = React3.useRef(options);
+  const prevOptionsRef = React3.useRef(optionsWithDefaults);
   const stableOptions = React3.useMemo(() => {
-    if (shallowEqual(prevOptionsRef.current, options)) {
+    if (shallowEqual(prevOptionsRef.current, optionsWithDefaults)) {
       return prevOptionsRef.current;
     }
-    prevOptionsRef.current = options;
-    return options;
-  }, [options]);
+    prevOptionsRef.current = optionsWithDefaults;
+    return optionsWithDefaults;
+  }, [optionsWithDefaults]);
   const onStateChangeRef = React3.useRef(options.onStateChange);
   onStateChangeRef.current = options.onStateChange;
   const resolvedState = React3.useMemo(
@@ -78,17 +120,14 @@ function useTable(options) {
     }),
     [state, stableOptions.state]
   );
-  const onStateChange = React3.useCallback(
-    (updater) => {
-      const latest = onStateChangeRef.current;
-      if (latest) {
-        latest(updater);
-      } else {
-        setState((prev) => yableCore.functionalUpdate(updater, prev));
-      }
-    },
-    []
-  );
+  const onStateChange = React3.useCallback((updater) => {
+    const latest = onStateChangeRef.current;
+    if (latest) {
+      latest(updater);
+    } else {
+      setState((prev) => yableCore.functionalUpdate(updater, prev));
+    }
+  }, []);
   const resolvedOptions = React3.useMemo(
     () => ({
       ...stableOptions,
@@ -101,12 +140,14 @@ function useTable(options) {
   if (!tableRef.current) {
     tableRef.current = yableCore.createTable(resolvedOptions);
   } else {
-    tableRef.current.setOptions((prev) => ({
-      ...prev,
-      ...resolvedOptions,
-      state: resolvedState,
-      onStateChange
-    }));
+    tableRef.current.setOptions(
+      (prev) => ({
+        ...prev,
+        ...resolvedOptions,
+        state: resolvedState,
+        onStateChange
+      })
+    );
   }
   React3.useEffect(() => {
     return () => {
@@ -117,6 +158,122 @@ function useTable(options) {
   }, []);
   return tableRef.current;
 }
+var DEFAULT_PERSISTED_KEYS = [
+  "columnVisibility",
+  "columnOrder",
+  "columnSizing",
+  "columnPinning"
+];
+function resolveStorage(custom) {
+  if (custom) return custom;
+  if (typeof window !== "undefined") {
+    try {
+      return window.localStorage;
+    } catch {
+      return void 0;
+    }
+  }
+  return void 0;
+}
+function pick(obj, keys) {
+  const result = {};
+  for (const k of keys) {
+    if (k in obj) {
+      result[k] = obj[k];
+    }
+  }
+  return result;
+}
+function readState(storage, key, version, persistedKeys) {
+  if (!storage) return {};
+  try {
+    const raw = storage.getItem(key);
+    if (!raw) return {};
+    const envelope = JSON.parse(raw);
+    if (envelope.version !== version) {
+      storage.removeItem(key);
+      return {};
+    }
+    return pick(envelope.state, persistedKeys);
+  } catch {
+    if (typeof console !== "undefined") {
+      console.warn(`[yable] Failed to read persisted state for key "${key}"`);
+    }
+    return {};
+  }
+}
+function writeState(storage, key, version, state) {
+  if (!storage) return;
+  try {
+    const envelope = { version, state };
+    storage.setItem(key, JSON.stringify(envelope));
+  } catch {
+    if (typeof console !== "undefined") {
+      console.warn(`[yable] Failed to persist state for key "${key}" (storage may be full)`);
+    }
+  }
+}
+function useTablePersistence(options) {
+  const {
+    key,
+    persistedKeys = DEFAULT_PERSISTED_KEYS,
+    debounce: debounceMs = 100,
+    version = 0,
+    storage: customStorage
+  } = options;
+  const storage = React3.useMemo(() => resolveStorage(customStorage), [customStorage]);
+  const initialState = React3.useMemo(
+    () => readState(storage, key, version, persistedKeys),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally read only on mount
+    []
+  );
+  const [state, setState] = React3.useState(initialState);
+  const timerRef = React3.useRef(null);
+  const keyRef = React3.useRef(key);
+  keyRef.current = key;
+  const versionRef = React3.useRef(version);
+  versionRef.current = version;
+  const persistedKeysRef = React3.useRef(persistedKeys);
+  persistedKeysRef.current = persistedKeys;
+  const debounceRef = React3.useRef(debounceMs);
+  debounceRef.current = debounceMs;
+  const storageRef = React3.useRef(storage);
+  storageRef.current = storage;
+  const onStateChange = React3.useCallback((updater) => {
+    setState((prev) => {
+      const next = yableCore.functionalUpdate(updater, prev);
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+      timerRef.current = setTimeout(() => {
+        const sliced = pick(
+          next,
+          persistedKeysRef.current
+        );
+        writeState(storageRef.current, keyRef.current, versionRef.current, sliced);
+        timerRef.current = null;
+      }, debounceRef.current);
+      return next;
+    });
+  }, []);
+  React3.useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+  const clearPersistedState = React3.useCallback(() => {
+    const s = storageRef.current;
+    if (s) {
+      try {
+        s.removeItem(keyRef.current);
+      } catch {
+      }
+    }
+  }, []);
+  return { initialState, state, onStateChange, clearPersistedState };
+}
 var EMPTY_RESULT = {
   virtualRows: [],
   totalHeight: 0,
@@ -130,11 +287,14 @@ function useVirtualization({
   overscan = 5,
   estimateRowHeight: _estimateRowHeight,
   pretextHeights,
-  pretextPrefixSums
+  pretextPrefixSums,
+  columnSizingHash
 }) {
   const hasPretextHeights = !!(pretextHeights && pretextPrefixSums && pretextHeights.length >= totalRows);
   const isFixedHeight = typeof rowHeight === "number" && !hasPretextHeights;
   const heightCacheRef = React3.useRef(/* @__PURE__ */ new Map());
+  const heightCacheVersionRef = React3.useRef(0);
+  const [heightCacheVersion, setHeightCacheVersion] = React3.useState(0);
   const getRowHeight = React3.useCallback(
     (index) => {
       if (hasPretextHeights) return pretextHeights[index];
@@ -145,7 +305,9 @@ function useVirtualization({
       heightCacheRef.current.set(index, height);
       return height;
     },
-    [rowHeight, isFixedHeight, hasPretextHeights, pretextHeights]
+    // heightCacheVersion forces a new callback identity after cache invalidation
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rowHeight, isFixedHeight, hasPretextHeights, pretextHeights, heightCacheVersion]
   );
   const [scrollState, setScrollState] = React3.useState({ scrollTop: 0, containerHeight: 0 });
   const rafRef = React3.useRef(null);
@@ -198,6 +360,18 @@ function useVirtualization({
       heightCacheRef.current.clear();
     }
   }, [totalRows, isFixedHeight]);
+  React3.useEffect(() => {
+    if (!isFixedHeight && columnSizingHash !== void 0) {
+      heightCacheRef.current.clear();
+      heightCacheVersionRef.current += 1;
+      setHeightCacheVersion(heightCacheVersionRef.current);
+    }
+  }, [columnSizingHash]);
+  const invalidateRowHeights = React3.useCallback(() => {
+    heightCacheRef.current.clear();
+    heightCacheVersionRef.current += 1;
+    setHeightCacheVersion(heightCacheVersionRef.current);
+  }, []);
   const scrollTo = React3.useCallback(
     (index) => {
       const container = containerRef.current;
@@ -234,10 +408,18 @@ function useVirtualization({
       total += getRowHeight(i);
     }
     return total;
-  }, [totalRows, rowHeight, isFixedHeight, getRowHeight, hasPretextHeights, pretextPrefixSums]);
+  }, [
+    totalRows,
+    rowHeight,
+    isFixedHeight,
+    getRowHeight,
+    hasPretextHeights,
+    pretextPrefixSums,
+    heightCacheVersion
+  ]);
   const { scrollTop, containerHeight } = scrollState;
   if (totalRows === 0) {
-    return { ...EMPTY_RESULT, scrollTo };
+    return { ...EMPTY_RESULT, scrollTo, invalidateRowHeights };
   }
   if (containerHeight === 0) {
     return {
@@ -245,7 +427,8 @@ function useVirtualization({
       totalHeight,
       startIndex: 0,
       endIndex: 0,
-      scrollTo
+      scrollTo,
+      invalidateRowHeights
     };
   }
   let startIndex = 0;
@@ -341,7 +524,8 @@ function useVirtualization({
     totalHeight,
     startIndex: overscanStart,
     endIndex: overscanEnd,
-    scrollTo
+    scrollTo,
+    invalidateRowHeights
   };
 }
 function binarySearchOffsets(offsets, target) {
@@ -1387,11 +1571,6 @@ function HeaderCell({
   const handleDragStart = React3.useCallback(
     (e) => {
       if (!canReorder) return;
-      const target = e.target;
-      if (target && target.closest(".yable-resize-handle")) {
-        e.preventDefault();
-        return;
-      }
       e.stopPropagation();
       e.dataTransfer.effectAllowed = "move";
       try {
@@ -1399,8 +1578,9 @@ function HeaderCell({
         e.dataTransfer.setData("text/plain", column.id);
       } catch {
       }
+      table.setColumnDragActive(true);
     },
-    [canReorder, column.id]
+    [canReorder, column.id, table]
   );
   const handleDragOver = React3.useCallback(
     (e) => {
@@ -1429,7 +1609,8 @@ function HeaderCell({
   }, []);
   const handleDragEnd = React3.useCallback(() => {
     setDragOver(null);
-  }, []);
+    table.setColumnDragActive(false);
+  }, [table]);
   const handleDrop = React3.useCallback(
     (e) => {
       if (!canReorder) return;
@@ -1439,6 +1620,7 @@ function HeaderCell({
       const rect = e.currentTarget.getBoundingClientRect();
       const insertAfter = e.clientX >= rect.left + rect.width / 2;
       setDragOver(null);
+      table.setColumnDragActive(false);
       if (!sourceId || sourceId === column.id) return;
       const state = table.getState();
       const allLeafs = table.getAllLeafColumns();
@@ -1489,18 +1671,24 @@ function HeaderCell({
       "aria-sort": sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : canSort ? "none" : void 0,
       role: "columnheader",
       colSpan: header.colSpan,
-      draggable: canReorder || void 0,
       onClick: handleHeaderClick,
-      onDragStart: canReorder ? handleDragStart : void 0,
       onDragOver: canReorder ? handleDragOver : void 0,
       onDragLeave: canReorder ? handleDragLeave : void 0,
-      onDragEnd: canReorder ? handleDragEnd : void 0,
       onDrop: canReorder ? handleDrop : void 0,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "yable-th-content", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: headerContent }),
-          canSort && /* @__PURE__ */ jsxRuntime.jsx(SortIndicator, { direction: sortDirection, index: sortIndex > 0 ? sortIndex : void 0 })
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "yable-th-content",
+            draggable: canReorder || void 0,
+            onDragStart: canReorder ? handleDragStart : void 0,
+            onDragEnd: canReorder ? handleDragEnd : void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: headerContent }),
+              canSort && /* @__PURE__ */ jsxRuntime.jsx(SortIndicator, { direction: sortDirection, index: sortIndex > 0 ? sortIndex : void 0 })
+            ]
+          }
+        ),
         canResize && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -1508,9 +1696,7 @@ function HeaderCell({
             "data-resizing": column.getIsResizing() || void 0,
             onMouseDown: startResize,
             onTouchStart: startResize,
-            onClick: handleResizeClick,
-            draggable: false,
-            onDragStart: (e) => e.preventDefault()
+            onClick: handleResizeClick
           }
         )
       ]
@@ -1709,6 +1895,11 @@ function TableCell({
     if (!table.getState().cellSelection?.isDragging) return;
     table.endCellRangeSelection();
   }, [table]);
+  const cellClassNameDef = column.columnDef.cellClassName;
+  const userClassName = typeof cellClassNameDef === "function" ? cellClassNameDef(cell.getContext()) : cellClassNameDef;
+  const cellStyleDef = column.columnDef.cellStyle;
+  const userStyle = typeof cellStyleDef === "function" ? cellStyleDef(cell.getContext()) : cellStyleDef;
+  const mergedStyle = userStyle ? { ...style, ...userStyle } : style;
   const classNames = [
     "yable-td",
     isFocused && "yable-cell--focused",
@@ -1716,13 +1907,14 @@ function TableCell({
     selectionEdges?.top && "yable-cell--selection-top",
     selectionEdges?.right && "yable-cell--selection-right",
     selectionEdges?.bottom && "yable-cell--selection-bottom",
-    selectionEdges?.left && "yable-cell--selection-left"
+    selectionEdges?.left && "yable-cell--selection-left",
+    userClassName
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "td",
     {
       className: classNames,
-      style,
+      style: mergedStyle,
       "data-editing": isEditing || void 0,
       "data-focused": isFocused || void 0,
       "data-pinned": pinned || void 0,
@@ -1862,7 +2054,11 @@ var CellErrorBoundary = class extends React3__default.default.Component {
     return this.props.children;
   }
 };
-function TableBody({ table, clickableRows }) {
+function TableBody({
+  table,
+  clickableRows,
+  colgroup
+}) {
   const rows = table.getRowModel().rows;
   const visibleColumns = table.getVisibleLeafColumns();
   const activeCell = table.getState().editing.activeCell;
@@ -1879,6 +2075,19 @@ function TableBody({ table, clickableRows }) {
   const estimateRowHeight = options.estimateRowHeight;
   const pretextHeights = options.pretextHeights ?? null;
   const pretextPrefixSums = options.pretextPrefixSums ?? null;
+  const columnSizing = table.getState().columnSizing;
+  const columnSizingHash = React3.useMemo(() => {
+    const entries = Object.entries(columnSizing);
+    if (entries.length === 0) return 0;
+    let h = 0;
+    for (const [key, value] of entries) {
+      for (let i = 0; i < key.length; i++) {
+        h = h * 31 + key.charCodeAt(i) | 0;
+      }
+      h = h * 31 + (value | 0) | 0;
+    }
+    return h;
+  }, [columnSizing]);
   const { virtualRows, totalHeight } = useVirtualization({
     containerRef: scrollContainerRef,
     totalRows: rows.length,
@@ -1886,7 +2095,8 @@ function TableBody({ table, clickableRows }) {
     overscan,
     estimateRowHeight,
     pretextHeights,
-    pretextPrefixSums
+    pretextPrefixSums,
+    columnSizingHash
   });
   const cellSelectionKey = cellSelection.range ? `${cellSelection.range.start.rowIndex}:${cellSelection.range.start.columnIndex}:${cellSelection.range.end.rowIndex}:${cellSelection.range.end.columnIndex}:${cellSelection.isDragging ? "dragging" : "idle"}` : `none:${cellSelection.isDragging ? "dragging" : "idle"}`;
   React3.useEffect(() => {
@@ -1937,7 +2147,7 @@ function TableBody({ table, clickableRows }) {
         {
           className: "yable-virtual-spacer",
           style: { height: totalHeight, position: "relative" },
-          children: /* @__PURE__ */ jsxRuntime.jsx(
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
             "table",
             {
               style: {
@@ -1948,35 +2158,38 @@ function TableBody({ table, clickableRows }) {
                 tableLayout: "fixed",
                 borderCollapse: "collapse"
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: virtualRows.map((vRow) => {
-                const row = rows[vRow.index];
-                if (!row) return null;
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  MemoizedTableRow,
-                  {
-                    row,
-                    table,
-                    rowIndex: vRow.index,
-                    visibleColumns,
-                    isSelected: row.getIsSelected(),
-                    isExpanded: row.getIsExpanded(),
-                    activeColumnId: activeCell?.rowId === row.id ? activeCell.columnId : void 0,
-                    focusedColumnIndex: focusedCell?.rowIndex === vRow.index ? focusedCell.columnIndex : null,
-                    hasFocusedCell: focusedCell !== null,
-                    cellSelectionKey,
-                    clickable: clickableRows,
-                    virtualStyle: {
-                      position: "absolute",
-                      top: 0,
-                      left: 0,
-                      width: "100%",
-                      height: vRow.size,
-                      transform: `translateY(${vRow.start}px)`
-                    }
-                  },
-                  row.id
-                );
-              }) })
+              children: [
+                colgroup,
+                /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: virtualRows.map((vRow) => {
+                  const row = rows[vRow.index];
+                  if (!row) return null;
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    MemoizedTableRow,
+                    {
+                      row,
+                      table,
+                      rowIndex: vRow.index,
+                      visibleColumns,
+                      isSelected: row.getIsSelected(),
+                      isExpanded: row.getIsExpanded(),
+                      activeColumnId: activeCell?.rowId === row.id ? activeCell.columnId : void 0,
+                      focusedColumnIndex: focusedCell?.rowIndex === vRow.index ? focusedCell.columnIndex : null,
+                      hasFocusedCell: focusedCell !== null,
+                      cellSelectionKey,
+                      clickable: clickableRows,
+                      virtualStyle: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        height: vRow.size,
+                        transform: `translateY(${vRow.start}px)`
+                      }
+                    },
+                    row.id
+                  );
+                }) })
+              ]
             }
           )
         }
@@ -3255,11 +3468,11 @@ function filterHeaderGroups(groups, visibleColumnIds) {
 }
 function Table({
   table,
-  stickyHeader,
-  striped,
-  bordered,
-  compact,
-  theme,
+  stickyHeader: stickyHeaderProp,
+  striped: stripedProp,
+  bordered: borderedProp,
+  compact: compactProp,
+  theme: themeProp,
   clickableRows,
   footer,
   loading,
@@ -3273,7 +3486,7 @@ function Table({
   renderLoading,
   children,
   className,
-  direction,
+  direction: directionProp,
   statusBar,
   statusBarPanels,
   sidebar,
@@ -3282,9 +3495,17 @@ function Table({
   floatingFilters,
   columnVirtualization,
   columnVirtualizationOverscan,
-  ariaLabel,
+  ariaLabel: ariaLabelProp,
   ...rest
 }) {
+  const { tableProps: providerTableProps } = useYableDefaults();
+  const stickyHeader = stickyHeaderProp ?? providerTableProps?.stickyHeader;
+  const striped = stripedProp ?? providerTableProps?.striped;
+  const bordered = borderedProp ?? providerTableProps?.bordered;
+  const compact = compactProp ?? providerTableProps?.compact;
+  const theme = themeProp ?? providerTableProps?.theme;
+  const direction = directionProp ?? providerTableProps?.direction;
+  const ariaLabel = ariaLabelProp ?? providerTableProps?.ariaLabel;
   const [sidebarOpen, setSidebarOpen] = React3.useState(false);
   const [sidebarPanel, setSidebarPanel] = React3.useState(
     defaultSidebarPanel ?? "columns"
@@ -3395,20 +3616,42 @@ function Table({
     },
     [contextMenu, table]
   );
-  const tableNode = /* @__PURE__ */ jsxRuntime.jsxs(
-    "table",
-    {
-      className: "yable-table",
-      style: columnVirtualState.isVirtualized ? {
+  const enableRowVirtualization = renderTable.options.enableVirtualization ?? false;
+  const visibleLeafColumns = renderTable.getVisibleLeafColumns();
+  const columnSizing = renderTable.getState().columnSizing;
+  const colgroup = React3.useMemo(() => {
+    if (visibleLeafColumns.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("colgroup", { children: visibleLeafColumns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: col.getSize() } }, col.id)) });
+  }, [visibleLeafColumns, columnSizing]);
+  const outerTableStyle = React3.useMemo(() => {
+    if (columnVirtualState.isVirtualized) {
+      return {
         width: columnVirtualState.visibleWidth,
         minWidth: columnVirtualState.visibleWidth,
         marginLeft: columnVirtualState.startOffset,
         tableLayout: "fixed"
-      } : void 0,
+      };
+    }
+    if (enableRowVirtualization) {
+      return { tableLayout: "fixed" };
+    }
+    return void 0;
+  }, [
+    columnVirtualState.isVirtualized,
+    columnVirtualState.visibleWidth,
+    columnVirtualState.startOffset,
+    enableRowVirtualization
+  ]);
+  const tableNode = /* @__PURE__ */ jsxRuntime.jsxs(
+    "table",
+    {
+      className: "yable-table",
+      style: outerTableStyle,
       "data-column-virtualized": columnVirtualState.isVirtualized || void 0,
       children: [
+        enableRowVirtualization && colgroup,
         /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { table: renderTable, floatingFilters }),
-        /* @__PURE__ */ jsxRuntime.jsx(TableBody, { table: renderTable, clickableRows }),
+        /* @__PURE__ */ jsxRuntime.jsx(TableBody, { table: renderTable, clickableRows, colgroup }),
         footer && /* @__PURE__ */ jsxRuntime.jsx(TableFooter, { table: renderTable })
       ]
     }
@@ -5416,6 +5659,233 @@ function useTheme(options = {}) {
     containerRef
   };
 }
+function selectColumn(options = {}) {
+  const { id = "_select", size = 40, headerAriaLabel = "Select all rows" } = options;
+  return {
+    id,
+    header: ({ table }) => /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "checkbox",
+        checked: table.getIsAllPageRowsSelected(),
+        ref: (el) => {
+          if (el)
+            el.indeterminate = table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected();
+        },
+        onChange: () => table.toggleAllPageRowsSelected(),
+        "aria-label": headerAriaLabel
+      }
+    ),
+    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "checkbox",
+        checked: row.getIsSelected(),
+        disabled: !row.getCanSelect(),
+        onChange: row.getToggleSelectedHandler(),
+        "aria-label": `Select row`
+      }
+    ),
+    size,
+    enableSorting: false,
+    enableColumnFilter: false,
+    enableResizing: false,
+    enableReorder: false,
+    enableHiding: false,
+    lockVisible: true
+  };
+}
+
+// src/presets/rowNumberColumn.tsx
+function rowNumberColumn(options = {}) {
+  const { id = "_rowNumber", header = "#", size = 50, startFrom = 1 } = options;
+  return {
+    id,
+    header,
+    cell: ({ row }) => row.index + startFrom,
+    size,
+    enableSorting: false,
+    enableColumnFilter: false,
+    enableResizing: false,
+    enableReorder: false,
+    lockVisible: true
+  };
+}
+function actionsColumn(options) {
+  const { id = "_actions", header = "", size = 100, actions } = options;
+  return {
+    id,
+    header,
+    cell: (ctx) => {
+      const items = typeof actions === "function" ? actions(ctx.row) : actions;
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "yable-cell-actions", children: items.filter((a) => !a.hidden || !a.hidden(ctx.row)).map((action, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "yable-action-btn",
+          disabled: action.disabled?.(ctx.row),
+          onClick: (e) => {
+            e.stopPropagation();
+            action.onClick(ctx.row);
+          },
+          title: action.label,
+          children: action.icon ?? action.label
+        },
+        i
+      )) });
+    },
+    size,
+    enableSorting: false,
+    enableColumnFilter: false,
+    enableResizing: false,
+    enableReorder: false
+  };
+}
+function expandColumn(options = {}) {
+  const { id = "_expand", size = 40 } = options;
+  return {
+    id,
+    header: () => null,
+    cell: ({ row }) => {
+      if (!row.getCanExpand()) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "yable-expand-btn",
+          onClick: (e) => {
+            e.stopPropagation();
+            row.toggleExpanded();
+          },
+          "aria-expanded": row.getIsExpanded(),
+          "aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "yable-expand-icon",
+              style: {
+                display: "inline-block",
+                transform: row.getIsExpanded() ? "rotate(90deg)" : "rotate(0deg)",
+                transition: "transform 150ms ease"
+              },
+              children: "\u25B6"
+            }
+          )
+        }
+      );
+    },
+    size,
+    enableSorting: false,
+    enableColumnFilter: false,
+    enableResizing: false,
+    enableReorder: false,
+    lockVisible: true
+  };
+}
+function CellStack({ children, gap = 2 }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "yable-cell-stack",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap
+      },
+      children
+    }
+  );
+}
+function CellRow({ children, gap = 6, align = "center", justify = "start" }) {
+  const justifyMap = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+    between: "space-between"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "yable-cell-row",
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: align === "baseline" ? "baseline" : align === "start" ? "flex-start" : align === "end" ? "flex-end" : "center",
+        justifyContent: justifyMap[justify] || "flex-start",
+        gap
+      },
+      children
+    }
+  );
+}
+function CellWithIcon({ icon, children, gap = 6, iconSize }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "yable-cell-with-icon",
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "yable-cell-icon",
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              ...iconSize ? { width: iconSize, height: iconSize } : {}
+            },
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "yable-cell-icon-content", style: { minWidth: 0 }, children })
+      ]
+    }
+  );
+}
+function CellText({
+  children,
+  variant = "primary",
+  bold,
+  truncate,
+  size = "md"
+}) {
+  const fontSizeMap = { sm: "0.75rem", md: "0.875rem", lg: "1rem" };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: `yable-cell-text yable-cell-text--${variant}`,
+      style: {
+        fontSize: fontSizeMap[size],
+        fontWeight: bold ? 600 : void 0,
+        color: variant === "secondary" ? "var(--yable-text-secondary, #6b7280)" : variant === "muted" ? "var(--yable-text-muted, #9ca3af)" : void 0,
+        ...truncate ? {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        } : {}
+      },
+      children
+    }
+  );
+}
+
+// src/utils/mergeEditChanges.ts
+function mergeEditChanges(data, changes, getRowId = (_, i) => String(i)) {
+  const changeKeys = Object.keys(changes);
+  if (changeKeys.length === 0) return data;
+  return data.map((row, i) => {
+    const id = getRowId(row, i);
+    const patch = changes[id];
+    return patch ? { ...row, ...patch } : row;
+  });
+}
 
 Object.defineProperty(exports, "CommitError", {
   enumerable: true,
@@ -5509,10 +5979,14 @@ exports.CellLink = CellLink;
 exports.CellNumeric = CellNumeric;
 exports.CellProgress = CellProgress;
 exports.CellRating = CellRating;
+exports.CellRow = CellRow;
 exports.CellSelect = CellSelect;
+exports.CellStack = CellStack;
 exports.CellStatus = CellStatus;
 exports.CellStatusBadge = CellStatusBadge;
+exports.CellText = CellText;
 exports.CellToggle = CellToggle;
+exports.CellWithIcon = CellWithIcon;
 exports.ColumnsPanel = ColumnsPanel;
 exports.ContextMenu = ContextMenu;
 exports.ContextMenuItem = ContextMenuItem;
@@ -5544,9 +6018,15 @@ exports.TableHeader = TableHeader;
 exports.TableProvider = TableProvider;
 exports.Tooltip = Tooltip;
 exports.TreeToggle = TreeToggle;
+exports.YableProvider = YableProvider;
+exports.actionsColumn = actionsColumn;
+exports.expandColumn = expandColumn;
 exports.getMeasureRecipeForCellType = getMeasureRecipeForCellType;
 exports.getRegisteredCellTypes = getRegisteredCellTypes;
+exports.mergeEditChanges = mergeEditChanges;
 exports.resolveMeasureRecipe = resolveMeasureRecipe;
+exports.rowNumberColumn = rowNumberColumn;
+exports.selectColumn = selectColumn;
 exports.useAutoMeasurements = useAutoMeasurements;
 exports.useCellFlash = useCellFlash;
 exports.useClipboard = useClipboard;
@@ -5560,9 +6040,11 @@ exports.useRowAnimation = useRowAnimation;
 exports.useRowDrag = useRowDrag;
 exports.useTable = useTable;
 exports.useTableContext = useTableContext;
+exports.useTablePersistence = useTablePersistence;
 exports.useTableRowHeights = useTableRowHeights;
 exports.useTheme = useTheme;
 exports.useTooltip = useTooltip;
 exports.useVirtualization = useVirtualization;
+exports.useYableDefaults = useYableDefaults;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map