twico-ui 1.34.0 → 1.35.0

package/dist/index.d.cts

@@ -2050,8 +2050,26 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   renderRowDetail?: (row: T) => React.ReactNode;
   /** Controlled set of expanded row keys (values from `rowKey`). Omit for uncontrolled (internal) expansion. */
   expandedRowIds?: Array<string | number>;
-  /** Fires with the next full array of expanded row keys whenever a row is expanded or collapsed. */
+  /** Fires with the next full array of expanded row keys whenever a row is expanded or collapsed.
+   *  Shared by `renderRowDetail` (#350) and the row-tree (#359). */
   onExpandedRowsChange?: (ids: Array<string | number>) => void;
+  /** #359 (server-mode lazy row-tree): draw the same leading chevron on a parent DATA row (independent of
+   *  `renderRowDetail`). Expanding reveals CHILD data rows in the SAME columns rather than a detail panel.
+   *  In **server mode** the grid does not fetch children — the expanded key set is folded into the
+   *  `onServerChange` query (`expanded`), so the host returns the parent + its children inline (and sets
+   *  `rowCount` to the flattened visible count; a collapsed parent counts as one row). Uses the shared
+   *  `expandedRowIds`/`onExpandedRowsChange`. Tree rows need stable unique keys (via `rowKey`/`id`). Carries
+   *  the #350 limits: not yet supported with `virtualized`, pivot, or `rowGrouping`, and no chevron on a
+   *  pinned (sticky) row. */
+  getRowCanExpand?: (row: T) => boolean;
+  /** #359: 0-based nesting depth, used only for the tree indent on the first data cell (0 = top-level parent).
+   *  In server mode supply it from the host-flattened rows; in client mode it's derived from the `getSubRows`
+   *  splice when omitted. @default 0 */
+  getRowDepth?: (row: T) => number;
+  /** #359 (client mode): children for an expanded parent, spliced in as first-class rows (same columns)
+   *  immediately after it. Ignored in `serverMode` (the host returns children inline). Children are rendered
+   *  after pagination, so they don't consume the parent's page budget and aren't independently sorted/filtered. */
+  getSubRows?: (row: T) => T[];
 }
 
 /** String-column filter operators (Datatable server mode). */
@@ -2092,6 +2110,10 @@ interface DatatableQuery {
   /** `field`s of the columns currently hidden via the Columns menu. Always populated in
    *  `onServerChange`; optional for the same reason as `visibleColumns`. */
   hiddenColumns?: string[];
+  /** #359 (server-mode lazy row-tree): keys of the currently-expanded parent rows. Always populated in
+   *  `onServerChange` when `getRowCanExpand` is used — the host fetches those parents' children and returns
+   *  them inline (a collapsed parent is one row). Optional on a hand-built query. */
+  expanded?: Array<string | number>;
 }
 
 /**

package/dist/index.d.ts

@@ -2050,8 +2050,26 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   renderRowDetail?: (row: T) => React.ReactNode;
   /** Controlled set of expanded row keys (values from `rowKey`). Omit for uncontrolled (internal) expansion. */
   expandedRowIds?: Array<string | number>;
-  /** Fires with the next full array of expanded row keys whenever a row is expanded or collapsed. */
+  /** Fires with the next full array of expanded row keys whenever a row is expanded or collapsed.
+   *  Shared by `renderRowDetail` (#350) and the row-tree (#359). */
   onExpandedRowsChange?: (ids: Array<string | number>) => void;
+  /** #359 (server-mode lazy row-tree): draw the same leading chevron on a parent DATA row (independent of
+   *  `renderRowDetail`). Expanding reveals CHILD data rows in the SAME columns rather than a detail panel.
+   *  In **server mode** the grid does not fetch children — the expanded key set is folded into the
+   *  `onServerChange` query (`expanded`), so the host returns the parent + its children inline (and sets
+   *  `rowCount` to the flattened visible count; a collapsed parent counts as one row). Uses the shared
+   *  `expandedRowIds`/`onExpandedRowsChange`. Tree rows need stable unique keys (via `rowKey`/`id`). Carries
+   *  the #350 limits: not yet supported with `virtualized`, pivot, or `rowGrouping`, and no chevron on a
+   *  pinned (sticky) row. */
+  getRowCanExpand?: (row: T) => boolean;
+  /** #359: 0-based nesting depth, used only for the tree indent on the first data cell (0 = top-level parent).
+   *  In server mode supply it from the host-flattened rows; in client mode it's derived from the `getSubRows`
+   *  splice when omitted. @default 0 */
+  getRowDepth?: (row: T) => number;
+  /** #359 (client mode): children for an expanded parent, spliced in as first-class rows (same columns)
+   *  immediately after it. Ignored in `serverMode` (the host returns children inline). Children are rendered
+   *  after pagination, so they don't consume the parent's page budget and aren't independently sorted/filtered. */
+  getSubRows?: (row: T) => T[];
 }
 
 /** String-column filter operators (Datatable server mode). */
@@ -2092,6 +2110,10 @@ interface DatatableQuery {
   /** `field`s of the columns currently hidden via the Columns menu. Always populated in
    *  `onServerChange`; optional for the same reason as `visibleColumns`. */
   hiddenColumns?: string[];
+  /** #359 (server-mode lazy row-tree): keys of the currently-expanded parent rows. Always populated in
+   *  `onServerChange` when `getRowCanExpand` is used — the host fetches those parents' children and returns
+   *  them inline (a collapsed parent is one row). Optional on a hand-built query. */
+  expanded?: Array<string | number>;
 }
 
 /**

package/dist/index.mjs

@@ -9326,6 +9326,13 @@ function Datatable({
   renderRowDetail,
   expandedRowIds,
   onExpandedRowsChange,
+  // #359: server-mode lazy row-tree — `getRowCanExpand(row)` draws the same leading chevron on parent DATA
+  // rows (independent of renderRowDetail); expanding reveals CHILD data rows in the SAME columns rather than a
+  // panel. In server mode the host returns children inline (the expanded set is folded into onServerChange);
+  // in client mode `getSubRows(row)` supplies them. `getRowDepth(row)` indents nested rows so they read as a tree.
+  getRowCanExpand,
+  getRowDepth,
+  getSubRows,
   className = "",
   ...rest
 }) {
@@ -9538,6 +9545,7 @@ function Datatable({
     () => new Set(expandControlled ? expandedRowIds : internalExpanded),
     [expandControlled, expandedRowIds, internalExpanded]
   );
+  const expandedKey = React51__default.useMemo(() => JSON.stringify([...expandedSet].sort()), [expandedSet]);
   const [pinnedRows, setPinnedRows] = React51__default.useState({ top: [], bottom: [] });
   const [headH, setHeadH] = React51__default.useState(41);
   const theadRef = React51__default.useRef(null);
@@ -9940,7 +9948,10 @@ function Datatable({
   const NUM_W = 56;
   const CHK_W = checkboxSelection ? rowReorder ? 68 : 44 : 0;
   const hasRowDetail = typeof renderRowDetail === "function";
-  const EXP_W = hasRowDetail ? 44 : 0;
+  const hasRowTree = typeof getRowCanExpand === "function";
+  const hasExpandCol = hasRowDetail || hasRowTree;
+  const treeExpandedKey = hasRowTree ? expandedKey : "";
+  const EXP_W = hasExpandCol ? 44 : 0;
   const numLeft = EXP_W + CHK_W;
   const leadW = numLeft + (showRowNum ? NUM_W : 0);
   const visLeft = React51__default.useMemo(() => pins.left.filter((f) => colByField[f] && !effectiveHidden.has(f)), [pins.left, colByField, effectiveHidden]);
@@ -10013,6 +10024,40 @@ function Datatable({
   React51__default.useEffect(() => {
     if (pageVal > totalPages - 1) commitPage(0);
   }, [totalPages]);
+  const treeRows = React51__default.useMemo(() => {
+    if (serverMode || typeof getSubRows !== "function") return null;
+    const out = [];
+    const seen2 = /* @__PURE__ */ new Set();
+    const walk = (r2, d) => {
+      const key = keyOf(r2);
+      if (seen2.has(key)) return;
+      seen2.add(key);
+      out.push({ row: r2, depth: d });
+      if (expandedSet.has(key)) for (const c of getSubRows(r2) || []) walk(c, d + 1);
+    };
+    for (const r2 of paged) walk(r2, 0);
+    return out;
+  }, [serverMode, getSubRows, paged, expandedSet, keyOf]);
+  const depthByKey = React51__default.useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    if (treeRows) for (const t of treeRows) m.set(keyOf(t.row), t.depth);
+    return m;
+  }, [treeRows, keyOf]);
+  const treeSeqByKey = React51__default.useMemo(() => {
+    if (!treeRows) return null;
+    const m = /* @__PURE__ */ new Map();
+    const seen2 = /* @__PURE__ */ new Set();
+    let n = 0;
+    const walk = (r2) => {
+      const key = keyOf(r2);
+      if (seen2.has(key)) return;
+      seen2.add(key);
+      m.set(key, n++);
+      if (expandedSet.has(key)) for (const c of getSubRows(r2) || []) walk(c);
+    };
+    for (const r2 of processed) walk(r2);
+    return m;
+  }, [treeRows, processed, expandedSet, getSubRows, keyOf]);
   const activeGroupBy = React51__default.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
   function subtotalText(rowsIn) {
     const parts = [];
@@ -10063,7 +10108,7 @@ function Datatable({
     };
     return build(paged, 0, "");
   }, [activeGroupBy, collapsed, paged, ordered, aggOn]);
-  const leafRows = displayItems ? displayItems.filter((i) => i.kind === "leaf").map((i) => i.row) : paged;
+  const leafRows = displayItems ? displayItems.filter((i) => i.kind === "leaf").map((i) => i.row) : treeRows ? treeRows.map((t) => t.row) : paged;
   function toggleGroup(key) {
     setCollapsed((s) => {
       const n = new Set(s);
@@ -10315,12 +10360,14 @@ function Datatable({
         // #303: "and" (default) | "or" — the server groups its WHERE accordingly
         quickFilter: quick.trim(),
         visibleColumns,
-        hiddenColumns
+        hiddenColumns,
         // #191: server can project only the visible columns
+        ...hasRowTree ? { expanded: [...expandedSet] } : null
+        // #359: only a row-tree folds expanded parents in
       });
     }, 250);
     return () => clearTimeout(t);
-  }, [serverMode, pageVal, sizeVal, sort, filters, filterLogic, quick, visibleColumns, hiddenColumns]);
+  }, [serverMode, pageVal, sizeVal, sort, filters, filterLogic, quick, visibleColumns, hiddenColumns, treeExpandedKey]);
   const onColVisRef = React51__default.useRef(onColumnVisibilityChange);
   onColVisRef.current = onColumnVisibilityChange;
   const lastVisibleKey = React51__default.useRef(null);
@@ -10694,12 +10741,12 @@ function Datatable({
       next = next === "" ? null : Number(next);
       if (Number.isNaN(next)) next = null;
     }
-    const row = paged.find((r2, i) => keyOf(r2, i) === editing.key);
+    const row = leafRows.find((r2, i) => keyOf(r2, i) === editing.key);
     setEditing(null);
     if (!row || row[editing.field] === next) return;
     const updated = { ...row, [editing.field]: next };
     onRowUpdate?.(updated, row, editing.field);
-    if (onRowsChange) {
+    if (onRowsChange && rows.some((r2, i) => keyOf(r2, i) === editing.key)) {
       onRowsChange(rows.map((r2, i) => keyOf(r2, i) === editing.key ? updated : r2));
     }
   }
@@ -10828,20 +10875,25 @@ function Datatable({
   };
   const writeCellPatches = (patchByKey) => {
     if (!patchByKey.size) return 0;
-    const changed = [];
-    const nextAll = rows.map((r2, i) => {
-      const k = keyOf(r2, i);
-      const patch = patchByKey.get(k);
-      if (!patch) return r2;
+    let count = 0;
+    leafRows.forEach((r2, i) => {
+      const patch = patchByKey.get(keyOf(r2, i));
+      if (!patch) return;
       const updated = { ...r2, ...patch };
-      changed.push([updated, r2, patch]);
-      return updated;
+      for (const f of Object.keys(patch)) onRowUpdate?.(updated, r2, f);
+      count++;
     });
-    changed.forEach(([updated, orig, patch]) => {
-      for (const f of Object.keys(patch)) onRowUpdate?.(updated, orig, f);
-    });
-    if (onRowsChange && changed.length) onRowsChange(nextAll);
-    return changed.length;
+    if (onRowsChange) {
+      let anyTop = false;
+      const nextAll = rows.map((r2, i) => {
+        const patch = patchByKey.get(keyOf(r2, i));
+        if (!patch) return r2;
+        anyTop = true;
+        return { ...r2, ...patch };
+      });
+      if (anyTop) onRowsChange(nextAll);
+    }
+    return count;
   };
   const rectCells = () => {
     if (!cellRect) return null;
@@ -11388,7 +11440,7 @@ function Datatable({
   const manageableCols = cols.filter((c) => c.field !== "__pinactions__");
   const visibleColCount = manageableCols.filter((c) => !effectiveHidden.has(c.field)).length;
   const rppOptions = Array.from(new Set([...pageSizeOptions || [], pageSize].filter((n) => n > 0))).sort((a, b) => a - b).map((n) => ({ value: String(n), label: String(n) }));
-  const totalCols = ordered.length + (checkboxSelection ? 1 : 0) + (showRowNum ? 1 : 0) + (hasRowDetail ? 1 : 0);
+  const totalCols = ordered.length + (checkboxSelection ? 1 : 0) + (showRowNum ? 1 : 0) + (hasExpandCol ? 1 : 0);
   function renderGroupRow(item) {
     const subs = aggOn ? subtotalText(item.rows) : [];
     return /* @__PURE__ */ jsx("tr", { className: "twc-dt__group-row", role: "row", children: /* @__PURE__ */ jsxs("td", { className: "twc-dt__group-cell", role: "gridcell", colSpan: totalCols, style: { maxWidth: "none" }, children: [
@@ -11443,8 +11495,10 @@ function Datatable({
     const k = keyOf(row, ri);
     const sel = selected.has(k);
     const detail = hasRowDetail && !pinSide ? renderRowDetail(row) : null;
-    const expandable = detail != null;
+    const canTreeExpand = hasRowTree && !pinSide && !!getRowCanExpand(row);
+    const expandable = detail != null || canTreeExpand;
     const open = expandable && expandedSet.has(k);
+    const depth = getRowDepth ? getRowDepth(row) || 0 : depthByKey.get(k) || 0;
     const rowActive = selectionMode === "row" && activeRowVal === k;
     const stickyStyle = pinSide === "top" ? { position: "sticky", top: headH, zIndex: 5 } : pinSide === "bottom" ? { position: "sticky", bottom: 0, zIndex: 5 } : void 0;
     const h = rowHeights[k];
@@ -11458,7 +11512,7 @@ function Datatable({
         {
           className: "twc-dt__row",
           role: "row",
-          "aria-rowindex": (paginated && !serverMode ? pageVal * sizeVal : 0) + ri + 2,
+          "aria-rowindex": treeSeqByKey ? treeSeqByKey.get(k) + 2 : (paginated && !serverMode ? pageVal * sizeVal : 0) + ri + 2,
           "aria-selected": (checkboxSelection ? sel : rowActive) || void 0,
           "data-op": row.__diffop || void 0,
           "data-selected": sel || void 0,
@@ -11492,7 +11546,7 @@ function Datatable({
           onDragEnd: reorderable ? () => setRowDrag({ from: null, over: null, after: false }) : void 0,
           onClick: (e) => handleRowClick(e, k, row),
           children: [
-            hasRowDetail ? /* @__PURE__ */ jsx("td", { className: "twc-dt__td twc-dt__expand-cell", role: "gridcell", "data-pin": "left", "data-pin-edge": checkboxSelection || showRowNum || visLeft.length ? void 0 : "left", style: { insetInlineStart: 0, width: EXP_W }, children: expandable ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__expand-btn", "aria-expanded": open, "aria-controls": open ? `${gridId}-detail-${ri}` : void 0, "aria-label": open ? "Collapse row" : "Expand row", onClick: (e) => {
+            hasExpandCol ? /* @__PURE__ */ jsx("td", { className: "twc-dt__td twc-dt__expand-cell", role: "gridcell", "data-pin": "left", "data-pin-edge": checkboxSelection || showRowNum || visLeft.length ? void 0 : "left", style: { insetInlineStart: 0, width: EXP_W }, children: expandable ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__expand-btn", "aria-expanded": open, "aria-controls": open && detail != null ? `${gridId}-detail-${ri}` : void 0, "aria-label": open ? "Collapse row" : "Expand row", onClick: (e) => {
               e.stopPropagation();
               toggleRowDetail(k);
             }, children: /* @__PURE__ */ jsx("span", { className: "twc-dt__expand-chev", "data-open": open || void 0, children: /* @__PURE__ */ jsx(Svg, { d: I.chevDown }) }) }) : null }) : null,
@@ -11521,7 +11575,7 @@ function Datatable({
               ] }),
               rowResize && !pinSide ? /* @__PURE__ */ jsx("span", { className: "twc-dt__row-resizer", title: "Drag to resize row", onPointerDown: (e) => startRowResize(e, k, e.currentTarget.closest("tr")), onClick: (e) => e.stopPropagation() }) : null
             ] }) : null,
-            showRowNum ? /* @__PURE__ */ jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": visLeft.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: typeof ri === "number" ? (paginated || serverMode ? pageVal * sizeVal : 0) + ri + 1 : "" }) : null,
+            showRowNum ? /* @__PURE__ */ jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": visLeft.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: treeSeqByKey ? treeSeqByKey.get(k) + 1 : typeof ri === "number" ? (paginated || serverMode ? pageVal * sizeVal : 0) + ri + 1 : "" }) : null,
             ordered.map((c, ci) => {
               const st = stickyOf(c.field);
               const val = getColVal(c, row);
@@ -11544,7 +11598,7 @@ function Datatable({
                   role: "gridcell",
                   "data-r": ri,
                   "data-c": ci,
-                  "aria-colindex": ci + 1 + (checkboxSelection ? 1 : 0) + (hasRowDetail ? 1 : 0),
+                  "aria-colindex": ci + 1 + (checkboxSelection ? 1 : 0) + (hasExpandCol ? 1 : 0),
                   tabIndex: focus.r === ri && focus.c === ci ? 0 : -1,
                   "aria-selected": cellSelected || void 0,
                   "data-num": c.type === "number" || void 0,
@@ -11557,7 +11611,7 @@ function Datatable({
                   "data-wrap": effectiveWrapped.has(c.field) || void 0,
                   "data-pin": st.pin,
                   "data-pin-edge": st.edge,
-                  style: { width: widthOf(c), ...cellSty, ...st.style, ...st.pin ? { position: "sticky", zIndex: 2 } : null },
+                  style: { width: widthOf(c), ...cellSty, ...st.style, ...st.pin ? { position: "sticky", zIndex: 2 } : null, ...ci === 0 && depth ? { paddingInlineStart: `calc(12px + ${depth * 20}px)` } : null },
                   "data-ovtext": cellTitle,
                   onClick: selectionMode === "cell" ? (e) => handleCellClick(e, k, row, c) : void 0,
                   onFocus: () => setFocus((f) => f.r === ri && f.c === ci ? f : { r: ri, c: ci }),
@@ -11609,7 +11663,7 @@ function Datatable({
           ]
         }
       ),
-      open ? /* @__PURE__ */ jsx("tr", { className: "twc-dt__detail-row", role: "row", children: /* @__PURE__ */ jsx("td", { id: `${gridId}-detail-${ri}`, className: "twc-dt__detail-cell", role: "gridcell", colSpan: totalCols, style: { maxWidth: "none" }, children: detail }) }) : null
+      open && detail != null ? /* @__PURE__ */ jsx("tr", { className: "twc-dt__detail-row", role: "row", children: /* @__PURE__ */ jsx("td", { id: `${gridId}-detail-${ri}`, className: "twc-dt__detail-cell", role: "gridcell", colSpan: totalCols, style: { maxWidth: "none" }, children: detail }) }) : null
     ] }, (pinSide ? "p-" : "") + k);
   }
   function renderPivot() {
@@ -11946,15 +12000,15 @@ function Datatable({
             ref: gridRef,
             role: "grid",
             "aria-label": ariaLabelAttr || ariaLabel,
-            "aria-rowcount": totalRows + 1,
-            "aria-colcount": ordered.length + (checkboxSelection ? 1 : 0) + (hasRowDetail ? 1 : 0),
+            "aria-rowcount": (treeSeqByKey ? treeSeqByKey.size : totalRows) + 1,
+            "aria-colcount": ordered.length + (checkboxSelection ? 1 : 0) + (hasExpandCol ? 1 : 0),
             "aria-multiselectable": selectionMode === "cell" || void 0,
             "aria-activedescendant": activeCellId,
             "aria-busy": loading || void 0,
             onKeyDown: onGridKeyDown,
             children: [
               /* @__PURE__ */ jsx("thead", { ref: theadRef, children: /* @__PURE__ */ jsxs("tr", { role: "row", "aria-rowindex": 1, children: [
-                hasRowDetail ? /* @__PURE__ */ jsx("th", { className: "twc-dt__th twc-dt__expand-cell", role: "columnheader", "aria-label": "Expand", "data-pin": "left", "data-pin-edge": checkboxSelection || showRowNum || visLeft.length ? void 0 : "left", style: { insetInlineStart: 0, width: EXP_W, minWidth: EXP_W } }) : null,
+                hasExpandCol ? /* @__PURE__ */ jsx("th", { className: "twc-dt__th twc-dt__expand-cell", role: "columnheader", "aria-label": "Expand", "data-pin": "left", "data-pin-edge": checkboxSelection || showRowNum || visLeft.length ? void 0 : "left", style: { insetInlineStart: 0, width: EXP_W, minWidth: EXP_W } }) : null,
                 checkboxSelection ? /* @__PURE__ */ jsx("th", { className: "twc-dt__th", role: "columnheader", "aria-label": "Select", "data-pin": "left", "data-pin-edge": visLeft.length || showRowNum ? void 0 : "left", style: { insetInlineStart: EXP_W, width: CHK_W, minWidth: CHK_W }, children: /* @__PURE__ */ jsx("div", { className: "twc-dt__th-inner", style: { justifyContent: "center", padding: 0 }, children: /* @__PURE__ */ jsx(
                   "span",
                   {
@@ -12131,7 +12185,7 @@ function Datatable({
                 })
               ] }) }),
               /* @__PURE__ */ jsx("tbody", { children: loading ? Array.from({ length: paginated ? Math.min(sizeVal, 8) : 8 }).map((_, ri) => /* @__PURE__ */ jsxs("tr", { className: "twc-dt__row", role: "row", children: [
-                hasRowDetail ? /* @__PURE__ */ jsx("td", { className: "twc-dt__td twc-dt__expand-cell", role: "gridcell", "data-pin": "left", style: { insetInlineStart: 0, width: EXP_W } }) : null,
+                hasExpandCol ? /* @__PURE__ */ jsx("td", { className: "twc-dt__td twc-dt__expand-cell", role: "gridcell", "data-pin": "left", style: { insetInlineStart: 0, width: EXP_W } }) : null,
                 checkboxSelection ? /* @__PURE__ */ jsx("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", style: { insetInlineStart: EXP_W, width: CHK_W }, children: /* @__PURE__ */ jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "18px", height: 18, borderRadius: 4 } }) }) : null,
                 showRowNum ? /* @__PURE__ */ jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: /* @__PURE__ */ jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "16px", height: 14, borderRadius: 4 } }) }) : null,
                 ordered.map((c, ci) => {
@@ -12154,7 +12208,7 @@ function Datatable({
                 pinnedBottomRows.map((row) => renderLeaf(row, keyIndex.get(keyOf(row)), "bottom"))
               ] }) }),
               hasAggregation && aggOn && !loading && paged.length > 0 ? /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsxs("tr", { role: "row", children: [
-                hasRowDetail ? /* @__PURE__ */ jsx("td", { role: "gridcell", "data-pin": "left", "data-pin-edge": checkboxSelection || showRowNum || visLeft.length ? void 0 : "left", style: { insetInlineStart: 0, width: EXP_W } }) : null,
+                hasExpandCol ? /* @__PURE__ */ jsx("td", { role: "gridcell", "data-pin": "left", "data-pin-edge": checkboxSelection || showRowNum || visLeft.length ? void 0 : "left", style: { insetInlineStart: 0, width: EXP_W } }) : null,
                 checkboxSelection ? /* @__PURE__ */ jsx("td", { role: "gridcell", "data-pin": "left", "data-pin-edge": visLeft.length || showRowNum ? void 0 : "left", style: { insetInlineStart: EXP_W, width: CHK_W } }) : null,
                 showRowNum ? /* @__PURE__ */ jsx("td", { className: "twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": visLeft.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W } }) : null,
                 ordered.map((c) => {