react-glide-table 2.1.0 → 2.2.1

package/dist/index.js

@@ -2225,23 +2225,49 @@ function applySelectionUpdater(mode, updater, previous) {
 function getRowFieldValue(row, key) {
   return row[key];
 }
-function computeRowSpans(data, rowSpanKey) {
+function normalizeRowSpanParent(value) {
+  if (!value) return [];
+  return typeof value === "string" ? [value] : [...value];
+}
+function toParentSpanList(parentSpans) {
+  if (!parentSpans?.length) return [];
+  const first = parentSpans[0];
+  if (!Array.isArray(first)) {
+    return [parentSpans];
+  }
+  return parentSpans;
+}
+function buildStartRowLookup(spans) {
+  const startRows = new Array(spans.length);
+  let origin = 0;
+  for (let i = 0; i < spans.length; i++) {
+    if ((spans[i]?.rowSpan ?? 1) > 0) origin = i;
+    startRows[i] = origin;
+  }
+  return startRows;
+}
+function sharesParentGroup(parentStartRows, rowIndex) {
+  if (parentStartRows.length === 0 || rowIndex <= 0) return true;
+  return parentStartRows.every(
+    (startRows) => startRows[rowIndex - 1] === startRows[rowIndex]
+  );
+}
+function computeRowSpans(data, rowSpanKey, parentSpans) {
   if (data.length === 0) return [];
+  const parentStartRows = toParentSpanList(parentSpans).map(buildStartRowLookup);
   const result = [];
   for (let index = 0; index < data.length; index++) {
     const currentValue = getRowFieldValue(data[index], rowSpanKey);
     const previousValue = index > 0 ? getRowFieldValue(data[index - 1], rowSpanKey) : void 0;
-    if (index > 0 && currentValue === previousValue) {
+    if (index > 0 && currentValue === previousValue && sharesParentGroup(parentStartRows, index)) {
       result.push({ rowSpan: 0, isFirstInGroup: false });
       continue;
     }
     let span = 1;
     for (let nextIndex = index + 1; nextIndex < data.length; nextIndex++) {
-      if (getRowFieldValue(data[nextIndex], rowSpanKey) === currentValue) {
-        span++;
-      } else {
-        break;
-      }
+      if (getRowFieldValue(data[nextIndex], rowSpanKey) !== currentValue) break;
+      if (!sharesParentGroup(parentStartRows, nextIndex)) break;
+      span++;
     }
     result.push({ rowSpan: span, isFirstInGroup: true });
   }
@@ -2263,10 +2289,50 @@ function resolveRowSpanAt(rowSpans, rowIndex) {
   }
   return { startRow: rowIndex, rowSpan: 1 };
 }
+function findRowSpanColumn(spec, ref) {
+  return spec.find((column) => column.columnId === ref) ?? spec.find((column) => column.rowSpanKey === ref);
+}
 function buildColumnRowSpanMap(data, columnKeys) {
   const map = /* @__PURE__ */ new Map();
-  for (const { columnId, rowSpanKey } of columnKeys) {
-    map.set(columnId, computeRowSpans(data, rowSpanKey));
+  const visiting = /* @__PURE__ */ new Set();
+  const warnedCycles = /* @__PURE__ */ new Set();
+  const virtualParents = /* @__PURE__ */ new Map();
+  const spansForColumn = (columnId) => {
+    const cached = map.get(columnId);
+    if (cached !== void 0) return cached;
+    const column = columnKeys.find((item) => item.columnId === columnId);
+    if (!column) return void 0;
+    if (visiting.has(columnId)) {
+      if (!warnedCycles.has(columnId)) {
+        warnedCycles.add(columnId);
+        console.warn(
+          `[rowSpan] rowSpanParent cycle detected at column "${columnId}"; dropping the cyclic parent reference.`
+        );
+      }
+      return void 0;
+    }
+    visiting.add(columnId);
+    const parentSpans = (column.rowSpanParent ?? []).map((ref) => spansForParentRef(ref)).filter((spans2) => Boolean(spans2));
+    visiting.delete(columnId);
+    const spans = computeRowSpans(
+      data,
+      column.rowSpanKey,
+      parentSpans.length > 0 ? parentSpans : void 0
+    );
+    map.set(columnId, spans);
+    return spans;
+  };
+  const spansForParentRef = (ref) => {
+    const parentColumn = findRowSpanColumn(columnKeys, ref);
+    if (parentColumn) return spansForColumn(parentColumn.columnId);
+    const cached = virtualParents.get(ref);
+    if (cached !== void 0) return cached;
+    const spans = computeRowSpans(data, ref);
+    virtualParents.set(ref, spans);
+    return spans;
+  };
+  for (const column of columnKeys) {
+    spansForColumn(column.columnId);
   }
   return map;
 }
@@ -2282,7 +2348,8 @@ function collectRowSpanColumns(columns) {
       if (!columnId || !columnDef.meta?.rowSpan) continue;
       result.push({
         columnId,
-        rowSpanKey: columnDef.meta.rowSpanKey ?? columnId
+        rowSpanKey: columnDef.meta.rowSpanKey ?? columnId,
+        rowSpanParent: normalizeRowSpanParent(columnDef.meta.rowSpanParent)
       });
     }
   };
@@ -2990,15 +3057,29 @@ function ResolvedTableCell({
 
 // src/components/ui/table/features/column-resize/columnResize.ts
 function getColumnSizeStyle(size, options) {
-  const { force = false, lockMax = false } = options ?? {};
-  if (!force && size === DATA_TABLE_COLUMN_SIZE) {
+  const { force = false, lockMax = false, minWidth, maxWidth } = options ?? {};
+  if (lockMax) {
+    return {
+      width: size,
+      minWidth: size,
+      maxWidth: size
+    };
+  }
+  const hasExplicitSize = force || size !== DATA_TABLE_COLUMN_SIZE;
+  if (!hasExplicitSize && minWidth == null && maxWidth == null) {
     return void 0;
   }
-  return {
-    width: size,
-    minWidth: size,
-    ...lockMax ? { maxWidth: size } : {}
-  };
+  const style = {};
+  if (hasExplicitSize) {
+    style.width = size;
+    style.minWidth = minWidth ?? size;
+  } else if (minWidth != null) {
+    style.minWidth = minWidth;
+  }
+  if (maxWidth != null) {
+    style.maxWidth = maxWidth;
+  }
+  return style;
 }
 
 // src/components/ui/table/features/column-reorder/useColumnReorder.ts
@@ -3607,7 +3688,9 @@ function DataTableRow({
         const hasSelectionEdges = hasCellSelectionEdges(selectionEdgeStyle);
         const sizeStyle = getColumnSizeStyle(cell.column.getSize(), {
           force: enableColumnResize,
-          lockMax: enableColumnResize
+          lockMax: enableColumnResize,
+          minWidth: meta?.minWidth,
+          maxWidth: meta?.maxWidth
         });
         const freezeOffset = enableColumnFreeze ? freezeOffsets.get(columnId) : void 0;
         const freezeStyle = getColumnFreezeStyle(freezeOffset);
@@ -4228,7 +4311,9 @@ function DataTable({
                     const canResize = enableColumnResize && header.column.getCanResize();
                     const sizeStyle = getColumnSizeStyle(header.getSize(), {
                       force: enableColumnResize,
-                      lockMax: enableColumnResize
+                      lockMax: enableColumnResize,
+                      minWidth: header.column.columnDef.meta?.minWidth,
+                      maxWidth: header.column.columnDef.meta?.maxWidth
                     });
                     const freezeOffset = enableColumnFreeze ? resolveHeaderFreezeOffset(header.column, freezeOffsets) : void 0;
                     const freezeStyle = getColumnFreezeStyle(freezeOffset, {
@@ -4434,12 +4519,15 @@ function buildColumnDef(props, sort, onSort) {
     width,
     minWidth,
     maxWidth,
+    minResizeWidth,
+    maxResizeWidth,
     resizable,
     reorderable,
     frozen,
     align,
     rowSpan,
     rowSpanKey,
+    rowSpanParent,
     editable,
     editType,
     editInputProps,
@@ -4453,8 +4541,8 @@ function buildColumnDef(props, sort, onSort) {
     id: field,
     ...!virtual ? { accessorKey: field } : {},
     size: width ?? DATA_TABLE_COLUMN_SIZE,
-    ...minWidth != null ? { minSize: minWidth } : {},
-    ...maxWidth != null ? { maxSize: maxWidth } : {},
+    ...minResizeWidth != null ? { minSize: minResizeWidth } : {},
+    ...maxResizeWidth != null ? { maxSize: maxResizeWidth } : {},
     ...resizable === false ? { enableResizing: false } : {},
     header: sortable ? () => /* @__PURE__ */ jsx8(
       SortableHeader,
@@ -4474,6 +4562,7 @@ function buildColumnDef(props, sort, onSort) {
       align,
       rowSpan,
       rowSpanKey,
+      rowSpanParent,
       editable,
       editType,
       editInputProps,
@@ -4482,6 +4571,8 @@ function buildColumnDef(props, sort, onSort) {
       cellRender: render,
       frozen,
       reorderable,
+      minWidth,
+      maxWidth,
       className,
       headerClassName
     }

package/dist/{types-CMUGtH-c.d.cts → types-CnsQ8GZb.d.cts}

@@ -180,10 +180,17 @@ type DataTableEditInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type
 
 declare module "@tanstack/react-table" {
     interface ColumnMeta<TData, TValue> {
-        /** Whether this column participates in vertical row spanning */
+        /**
+         * Whether this column participates in vertical row spanning.
+         */
         rowSpan?: boolean;
         /** Merge key field. Falls back to the column id when omitted */
         rowSpanKey?: string;
+        /**
+         * Parent column id, rowSpanKey, or row field(s) that bound this merge.
+         * The column only groups consecutive rows that stay inside those parent groups.
+         */
+        rowSpanParent?: string | readonly string[];
         align?: "left" | "center" | "right";
         className?: string;
         headerClassName?: string;
@@ -213,6 +220,10 @@ declare module "@tanstack/react-table" {
          * Defaults to true.
          */
         reorderable?: boolean;
+        /** CSS min-width for header/body cells. Independent of column resize. */
+        minWidth?: number;
+        /** CSS max-width for header/body cells. Independent of column resize. */
+        maxWidth?: number;
     }
     interface CellContext<TData, TValue> {
         /**
@@ -538,10 +549,20 @@ type TableColumnProps<T extends Record<string, unknown>, K extends string = keyo
     sortable?: boolean;
     /** Initial / default column width in px (TanStack `size`) */
     width?: number;
-    /** Minimum resize width in px. Defaults to the table min when omitted */
+    /**
+     * CSS min-width for this column's cells.
+     * Independent of `enableColumnResize` / `minResizeWidth`.
+     */
     minWidth?: number;
-    /** Maximum resize width in px. Defaults to the table max when omitted */
+    /**
+     * CSS max-width for this column's cells.
+     * Independent of `enableColumnResize` / `maxResizeWidth`.
+     */
     maxWidth?: number;
+    /** Minimum drag-resize width in px. Defaults to the table min when omitted */
+    minResizeWidth?: number;
+    /** Maximum drag-resize width in px. Defaults to the table max when omitted */
+    maxResizeWidth?: number;
     /**
      * When false, this column cannot be resized even if `enableColumnResize` is on.
      * Defaults to true.
@@ -559,8 +580,14 @@ type TableColumnProps<T extends Record<string, unknown>, K extends string = keyo
      */
     frozen?: ColumnFreezeMeta;
     align?: "left" | "center" | "right";
+    /** Vertical cell merge for consecutive identical `rowSpanKey` values. */
     rowSpan?: boolean;
     rowSpanKey?: string;
+    /**
+     * Parent field(s) this merge is nested under — a column `field`, `rowSpanKey`,
+     * or row data key. Omit to merge independently of other rowSpan columns.
+     */
+    rowSpanParent?: string | readonly string[];
     editable?: boolean;
     editType?: CellEditType;
     /** Inline editor input attribute overrides */

package/dist/{types-CMUGtH-c.d.ts → types-CnsQ8GZb.d.ts}

@@ -180,10 +180,17 @@ type DataTableEditInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type
 
 declare module "@tanstack/react-table" {
     interface ColumnMeta<TData, TValue> {
-        /** Whether this column participates in vertical row spanning */
+        /**
+         * Whether this column participates in vertical row spanning.
+         */
         rowSpan?: boolean;
         /** Merge key field. Falls back to the column id when omitted */
         rowSpanKey?: string;
+        /**
+         * Parent column id, rowSpanKey, or row field(s) that bound this merge.
+         * The column only groups consecutive rows that stay inside those parent groups.
+         */
+        rowSpanParent?: string | readonly string[];
         align?: "left" | "center" | "right";
         className?: string;
         headerClassName?: string;
@@ -213,6 +220,10 @@ declare module "@tanstack/react-table" {
          * Defaults to true.
          */
         reorderable?: boolean;
+        /** CSS min-width for header/body cells. Independent of column resize. */
+        minWidth?: number;
+        /** CSS max-width for header/body cells. Independent of column resize. */
+        maxWidth?: number;
     }
     interface CellContext<TData, TValue> {
         /**
@@ -538,10 +549,20 @@ type TableColumnProps<T extends Record<string, unknown>, K extends string = keyo
     sortable?: boolean;
     /** Initial / default column width in px (TanStack `size`) */
     width?: number;
-    /** Minimum resize width in px. Defaults to the table min when omitted */
+    /**
+     * CSS min-width for this column's cells.
+     * Independent of `enableColumnResize` / `minResizeWidth`.
+     */
     minWidth?: number;
-    /** Maximum resize width in px. Defaults to the table max when omitted */
+    /**
+     * CSS max-width for this column's cells.
+     * Independent of `enableColumnResize` / `maxResizeWidth`.
+     */
     maxWidth?: number;
+    /** Minimum drag-resize width in px. Defaults to the table min when omitted */
+    minResizeWidth?: number;
+    /** Maximum drag-resize width in px. Defaults to the table max when omitted */
+    maxResizeWidth?: number;
     /**
      * When false, this column cannot be resized even if `enableColumnResize` is on.
      * Defaults to true.
@@ -559,8 +580,14 @@ type TableColumnProps<T extends Record<string, unknown>, K extends string = keyo
      */
     frozen?: ColumnFreezeMeta;
     align?: "left" | "center" | "right";
+    /** Vertical cell merge for consecutive identical `rowSpanKey` values. */
     rowSpan?: boolean;
     rowSpanKey?: string;
+    /**
+     * Parent field(s) this merge is nested under — a column `field`, `rowSpanKey`,
+     * or row data key. Omit to merge independently of other rowSpan columns.
+     */
+    rowSpanParent?: string | readonly string[];
     editable?: boolean;
     editType?: CellEditType;
     /** Inline editor input attribute overrides */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-glide-table",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zpxlffjrm/react-glide-table.git"