twico-ui 1.34.0 → 1.36.0

package/dist/index.mjs

@@ -8869,11 +8869,12 @@ function combineCfg(combine) {
   if (!fields.length) return null;
   return { fields, separator: cfg.separator != null ? cfg.separator : " \xB7 ", labels: !!cfg.labels, layout: cfg.layout === "stack" ? "stack" : "inline" };
 }
+var colLabel = (c) => typeof c.headerName === "string" ? c.headerName : String(c.field ?? "");
 var combineSrcCols = (cfg, byField) => cfg.fields.map((f) => byField && byField[f] || { field: f, headerName: String(f) });
 var combineValueGetter = (srcCols, cfg) => (row) => srcCols.map((sc) => {
   const v = getColVal(sc, row);
   const s = v == null ? "" : String(v);
-  return cfg.labels && s ? `${sc.headerName ?? sc.field}: ${s}` : s;
+  return cfg.labels && s ? `${colLabel(sc)}: ${s}` : s;
 }).filter(Boolean).join(cfg.separator);
 function renderCombined(srcCols, row, cfg) {
   const nodes = [];
@@ -8882,7 +8883,7 @@ function renderCombined(srcCols, row, cfg) {
     const v = getColVal(sc, row);
     if (v == null || v === "") return;
     const disp = sc.valueFormatter ? sc.valueFormatter(v, row) : v;
-    const label = cfg.labels ? React51__default.createElement("span", { className: "twc-dt__combine-label" }, (sc.headerName ?? sc.field) + ": ") : null;
+    const label = cfg.labels ? React51__default.createElement("span", { className: "twc-dt__combine-label" }, colLabel(sc) + ": ") : null;
     if (count > 0 && cfg.layout !== "stack") nodes.push(React51__default.createElement("span", { key: "sep" + idx, className: "twc-dt__combine-sep", "aria-hidden": "true" }, cfg.separator));
     nodes.push(React51__default.createElement("span", { key: idx, className: "twc-dt__combine-item" }, label, disp));
     count++;
@@ -9132,7 +9133,7 @@ function EditCell({ col, value, options, onChange, onCommit, onCommitValue, onCa
       className: "twc-dt__editor",
       type: col.type === "number" ? "number" : "text",
       value: value ?? "",
-      "aria-label": `Edit ${col.headerName}`,
+      "aria-label": `Edit ${colLabel(col)}`,
       onChange: (e) => onChange(e.target.value),
       onKeyDown,
       onBlur: onCommit
@@ -9326,6 +9327,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 +9546,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);
@@ -9775,7 +9784,7 @@ function Datatable({
   }, [rowGroupingKey]);
   const AUTO_CHROME = 74;
   const autoWidth = (c) => {
-    const label = typeof c.headerName === "string" ? c.headerName : String(c.field ?? "");
+    const label = colLabel(c);
     return AUTO_CHROME + Math.ceil(label.length * 8);
   };
   const clampWidth = (w, c) => {
@@ -9899,6 +9908,7 @@ function Datatable({
     };
   }, [exportOpen]);
   const colByField = React51__default.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
+  const fieldLabel = (f) => colLabel(colByField[f] || { field: f });
   const combineSources = React51__default.useMemo(() => {
     const s = /* @__PURE__ */ new Set();
     for (const cfg of Object.values(userCombine)) (cfg && cfg.fields ? cfg.fields : []).slice(1).forEach((f) => s.add(f));
@@ -9940,7 +9950,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 +10026,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 = [];
@@ -10022,7 +10069,7 @@ function Datatable({
       const v = computeAgg({ ...c, aggregation: agg }, rowsIn);
       if (v == null) continue;
       const disp = c.aggregationFormatter ? c.aggregationFormatter(v) : c.valueFormatter ? c.valueFormatter(v, null) : typeof v === "number" ? v.toLocaleString() : v;
-      parts.push(`${c.headerName} ${disp}`);
+      parts.push(`${colLabel(c)} ${disp}`);
     }
     return parts;
   }
@@ -10063,7 +10110,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 +10362,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);
@@ -10373,7 +10422,7 @@ function Datatable({
       next.splice(dir > 0 ? b + 1 : b, 0, field);
       return next;
     });
-    const label = colByField[field]?.headerName || field;
+    const label = fieldLabel(field);
     setReorderMsg(`Moved ${label} ${dir < 0 ? "left" : "right"}.`);
   }
   function optionsForField(field) {
@@ -10480,7 +10529,7 @@ function Datatable({
       const rowXml = (cells, r2) => `<row r="${r2}">${cells.map((v, ci) => cell(`${colLetter(ci)}${r2}`, v)).join("")}</row>`;
       const lastCell = `${expCols.length ? colLetter(expCols.length - 1) : "A"}${source.length + 1}`;
       const sheet = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
-<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"><dimension ref="A1:${lastCell}"/><sheetViews><sheetView tabSelected="1" workbookViewId="0"/></sheetViews><sheetData>` + rowXml(expCols.map((c) => c.headerName), 1) + source.map((row, ri) => rowXml(expCols.map((c) => cellValue(c, row)), ri + 2)).join("") + "</sheetData></worksheet>";
+<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"><dimension ref="A1:${lastCell}"/><sheetViews><sheetView tabSelected="1" workbookViewId="0"/></sheetViews><sheetData>` + rowXml(expCols.map((c) => colLabel(c)), 1) + source.map((row, ri) => rowXml(expCols.map((c) => cellValue(c, row)), ri + 2)).join("") + "</sheetData></worksheet>";
       download(xlsxPackage(sheet), "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "xlsx");
       return;
     }
@@ -10488,7 +10537,7 @@ function Datatable({
       const s = defang(v, v == null ? "" : String(v));
       return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
     };
-    const header = expCols.map((c) => escape(c.headerName)).join(",");
+    const header = expCols.map((c) => escape(colLabel(c))).join(",");
     const lines = source.map((row) => expCols.map((c) => escape(cellValue(c, row))).join(","));
     const text = "\uFEFF" + [header, ...lines].join("\r\n");
     download(text, "text/csv;charset=utf-8;", "csv");
@@ -10694,12 +10743,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 +10877,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;
@@ -11020,7 +11074,7 @@ function Datatable({
       const widest = (labels) => labels.reduce((m, l) => Math.max(m, ctx.measureText(String(l)).width), 0);
       const logicW = Math.min(180, Math.max(84, Math.ceil(widest(["And", "Or"]) + chrome)));
       const colCap = Math.max(118, Math.min(210, el.clientWidth - logicW - 118 - 30 - 30 - 140 - 5 * 6 - 2 * 4));
-      const colW = Math.min(colCap, Math.max(118, Math.ceil(widest(filterableCols.map((c) => c.headerName ?? c.field)) + chrome)));
+      const colW = Math.min(colCap, Math.max(118, Math.ceil(widest(filterableCols.map((c) => colLabel(c))) + chrome)));
       const opW = Math.min(170, Math.max(118, Math.ceil(widest(ALL_OP_LABELS) + chrome)));
       if (Number.isFinite(logicW)) el.style.setProperty("--twc-dt-flogic-fit", `${logicW}px`);
       if (Number.isFinite(colW)) el.style.setProperty("--twc-dt-fcol-fit", `${colW}px`);
@@ -11383,12 +11437,12 @@ function Datatable({
     const i = order.indexOf(f);
     return i === -1 ? 9999 : i;
   };
-  const shownColRows = cols.filter((c) => c.field !== "__pinactions__" && c.headerName.toLowerCase().includes(colQuery.trim().toLowerCase())).sort((a, b) => orderIdxOf(a.field) - orderIdxOf(b.field));
+  const shownColRows = cols.filter((c) => c.field !== "__pinactions__" && colLabel(c).toLowerCase().includes(colQuery.trim().toLowerCase())).sort((a, b) => orderIdxOf(a.field) - orderIdxOf(b.field));
   const rowNumMatch = rowNumbers && "row number".includes(colQuery.trim().toLowerCase());
   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: [
@@ -11403,7 +11457,7 @@ function Datatable({
           children: [
             /* @__PURE__ */ jsx("span", { className: "twc-dt__group-chev", "data-open": !item.collapsed || void 0, children: /* @__PURE__ */ jsx(Svg, { d: I.chevDown }) }),
             /* @__PURE__ */ jsxs("span", { className: "twc-dt__group-name", children: [
-              colByField[item.field]?.headerName || item.field,
+              fieldLabel(item.field),
               ":"
             ] }),
             /* @__PURE__ */ jsx("span", { className: "twc-dt__group-val", children: String(item.value) }),
@@ -11443,8 +11497,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 +11514,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 +11548,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 +11577,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 +11600,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 +11613,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 +11665,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() {
@@ -11623,8 +11679,8 @@ function Datatable({
       const f = v.valueFormatter || col?.valueFormatter;
       return f ? f(val, null) : typeof val === "number" ? val.toLocaleString() : val;
     };
-    const vlabel = (v) => v.label || (colByField[v.field]?.headerName || v.field);
-    const rowFieldLabel = rFields.map((f) => colByField[f]?.headerName || f).join(" / ");
+    const vlabel = (v) => v.label || fieldLabel(v.field);
+    const rowFieldLabel = rFields.map((f) => fieldLabel(f)).join(" / ");
     const leafPaths = [];
     const seen2 = /* @__PURE__ */ new Set();
     for (const r2 of rows) {
@@ -11919,8 +11975,8 @@ function Datatable({
       /* @__PURE__ */ jsx(Svg, { d: I.group }),
       /* @__PURE__ */ jsx("span", { className: "twc-dt__groupbar-label", children: "Grouped by" }),
       activeGroupBy.map((f) => /* @__PURE__ */ jsxs("span", { className: "twc-dt__groupchip", children: [
-        colByField[f]?.headerName || f,
-        /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__groupchip-x", "aria-label": `Stop grouping by ${colByField[f]?.headerName || f}`, onClick: () => toggleGroupField(f), children: /* @__PURE__ */ jsx(Svg, { d: I.x }) })
+        fieldLabel(f),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__groupchip-x", "aria-label": `Stop grouping by ${fieldLabel(f)}`, onClick: () => toggleGroupField(f), children: /* @__PURE__ */ jsx(Svg, { d: I.x }) })
       ] }, f)),
       /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__groupbar-clear", onClick: () => setGroupBy([]), children: "Clear all" })
     ] }) : null,
@@ -11946,15 +12002,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",
                   {
@@ -12042,8 +12098,8 @@ function Datatable({
                               className: "twc-dt__th-label",
                               role: c.sortable ? "button" : void 0,
                               tabIndex: c.sortable ? 0 : void 0,
-                              "data-ovtext": typeof c.headerName === "string" ? c.headerName : void 0,
-                              "aria-label": c.sortable ? `${c.headerName}, sort` : void 0,
+                              "data-ovtext": !c.renderHeader && typeof c.headerName === "string" ? c.headerName : void 0,
+                              "aria-label": c.sortable ? `${colLabel(c)}, sort` : void 0,
                               draggable: reorderable || void 0,
                               onDragStart: reorderable ? (e) => {
                                 setDrag({ from: c.field, over: null, after: false });
@@ -12061,7 +12117,7 @@ function Datatable({
                               children: [
                                 reorderable ? /* @__PURE__ */ jsx("span", { className: "twc-dt__grip", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Svg, { d: I.grip }) }) : null,
                                 filteredFields.has(c.field) ? /* @__PURE__ */ jsx("span", { className: "twc-dt__filterdot" }) : null,
-                                c.headerName,
+                                c.renderHeader ? c.renderHeader({ column: c }) : c.headerName,
                                 c.sortable ? /* @__PURE__ */ jsx("span", { className: "twc-dt__sort", children: /* @__PURE__ */ jsx(Svg, { d: I.arrow }) }) : null
                               ]
                             }
@@ -12097,7 +12153,7 @@ function Datatable({
                             "data-active": resizing || void 0,
                             role: "separator",
                             "aria-orientation": "vertical",
-                            "aria-label": `Resize ${c.headerName} column (double-click to fit content)`,
+                            "aria-label": `Resize ${colLabel(c)} column (double-click to fit content)`,
                             "aria-valuenow": w,
                             "aria-valuemin": 72,
                             tabIndex: 0,
@@ -12131,7 +12187,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 +12210,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) => {
@@ -12272,15 +12328,15 @@ function Datatable({
             placeholder: "Add a column\u2026",
             value: "",
             "aria-label": "Add a column to edit",
-            options: unpicked.map((c) => ({ value: c.field, label: String(c.headerName ?? c.field) })),
+            options: unpicked.map((c) => ({ value: c.field, label: colLabel(c) })),
             onChange: addField
           }
         ) }) : null,
         /* @__PURE__ */ jsx("div", { className: "twc-dt__cfg-list", children: pickedCols.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-dt__be-empty", children: "Pick a column to set its value on all selected rows." }) : pickedCols.map((c, i) => {
           const opts = c.valueOptions ? c.valueOptions.map((o) => typeof o === "string" ? { value: o, label: o } : o) : null;
           return /* @__PURE__ */ jsxs("div", { className: "twc-dt__be-row", children: [
-            /* @__PURE__ */ jsxs("span", { className: "twc-dt__be-name", title: String(c.headerName ?? c.field), children: [
-              /* @__PURE__ */ jsx("span", { className: "twc-dt__be-name-txt", children: c.headerName }),
+            /* @__PURE__ */ jsxs("span", { className: "twc-dt__be-name", title: colLabel(c), children: [
+              /* @__PURE__ */ jsx("span", { className: "twc-dt__be-name-txt", children: colLabel(c) }),
               resizableFilters && i === 0 ? /* @__PURE__ */ jsx(
                 "span",
                 {
@@ -12320,7 +12376,7 @@ function Datatable({
                 onChange: (e) => setBatchEdit((b) => ({ ...b, values: { ...b.values, [c.field]: e.target.value } }))
               }
             ) }),
-            /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__be-x", "aria-label": `Remove ${String(c.headerName ?? c.field)}`, onClick: () => removeField(c.field), children: /* @__PURE__ */ jsx(Svg, { d: I.x }) })
+            /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__be-x", "aria-label": `Remove ${colLabel(c)}`, onClick: () => removeField(c.field), children: /* @__PURE__ */ jsx(Svg, { d: I.x }) })
           ] }, c.field);
         }) }),
         /* @__PURE__ */ jsxs("div", { className: "twc-dt__cfg-foot", children: [
@@ -12592,7 +12648,7 @@ function Datatable({
               children: [
                 canDrag ? /* @__PURE__ */ jsx("span", { className: "twc-dt__col-grip", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Svg, { d: I.grip }) }) : null,
                 /* @__PURE__ */ jsxs("span", { className: "twc-dt__col-name", children: [
-                  c.headerName,
+                  colLabel(c),
                   combineSources.has(c.field) ? /* @__PURE__ */ jsx("span", { className: "twc-dt__col-combined", children: " \xB7 combined" }) : null
                 ] }),
                 c.pinnable && c.type !== "actions" ? (
@@ -12605,7 +12661,7 @@ function Datatable({
                         className: "twc-dt__col-pin",
                         "data-on": pins.left.includes(c.field) || void 0,
                         "aria-pressed": pins.left.includes(c.field),
-                        "aria-label": `Pin ${c.headerName} to left`,
+                        "aria-label": `Pin ${colLabel(c)} to left`,
                         title: pins.left.includes(c.field) ? "Unpin" : "Pin to left",
                         onClick: () => setPin(c.field, pins.left.includes(c.field) ? null : "left"),
                         children: /* @__PURE__ */ jsx(Svg, { d: I.pinL })
@@ -12618,7 +12674,7 @@ function Datatable({
                         className: "twc-dt__col-pin",
                         "data-on": pins.right.includes(c.field) || void 0,
                         "aria-pressed": pins.right.includes(c.field),
-                        "aria-label": `Pin ${c.headerName} to right`,
+                        "aria-label": `Pin ${colLabel(c)} to right`,
                         title: pins.right.includes(c.field) ? "Unpin" : "Pin to right",
                         onClick: () => setPin(c.field, pins.right.includes(c.field) ? null : "right"),
                         children: /* @__PURE__ */ jsx(Svg, { d: I.pin })
@@ -12633,7 +12689,7 @@ function Datatable({
                     "data-on": !effectiveHidden.has(c.field) || void 0,
                     role: "switch",
                     "aria-checked": !effectiveHidden.has(c.field),
-                    "aria-label": c.headerName,
+                    "aria-label": colLabel(c),
                     "aria-disabled": !c.hideable || combineSources.has(c.field) || void 0,
                     tabIndex: c.hideable && !combineSources.has(c.field) ? 0 : -1,
                     onKeyDown: (e) => {
@@ -12657,17 +12713,17 @@ function Datatable({
       const target = colByField[combineTarget];
       const candidates = cols.filter((c) => c.field !== combineTarget && c.type !== "actions" && c.field !== "__pinactions__" && c.hideable !== false && !userCombine[c.field]);
       const toggle = (f) => setCombineDraft((d) => ({ ...d, selected: d.selected.includes(f) ? d.selected.filter((x) => x !== f) : [...d.selected, f] }));
-      return /* @__PURE__ */ jsxs("div", { ref: combinePanelRef, tabIndex: -1, className: "twc-dt__pop twc-dt__cols", style: { top: panelPos.top, left: panelPos.left, ...popStyle("combine") }, "data-pop-sized": popSizes.combine ? "" : void 0, role: "dialog", "aria-label": `Combine columns into ${target?.headerName || combineTarget}`, children: [
+      return /* @__PURE__ */ jsxs("div", { ref: combinePanelRef, tabIndex: -1, className: "twc-dt__pop twc-dt__cols", style: { top: panelPos.top, left: panelPos.left, ...popStyle("combine") }, "data-pop-sized": popSizes.combine ? "" : void 0, role: "dialog", "aria-label": `Combine columns into ${target ? colLabel(target) : combineTarget}`, children: [
         /* @__PURE__ */ jsx("div", { className: "twc-dt__panel-head", children: /* @__PURE__ */ jsxs("span", { className: "twc-dt__panel-title", children: [
           "Combine into \u201C",
-          target?.headerName || combineTarget,
+          target ? colLabel(target) : combineTarget,
           "\u201D"
         ] }) }),
         /* @__PURE__ */ jsx("div", { className: "twc-dt__combine-hint", children: "Pick columns to merge into this one \u2014 their data shows in this cell and their own columns hide." }),
         /* @__PURE__ */ jsx("div", { className: "twc-dt__col-list", children: candidates.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-dt__empty", style: { padding: "18px 12px" }, children: "No other columns" }) : candidates.map((c) => {
           const on = combineDraft.selected.includes(c.field);
           return /* @__PURE__ */ jsxs("div", { className: "twc-dt__col-row", onClick: () => toggle(c.field), children: [
-            /* @__PURE__ */ jsx("span", { className: "twc-dt__col-name", children: c.headerName }),
+            /* @__PURE__ */ jsx("span", { className: "twc-dt__col-name", children: colLabel(c) }),
             /* @__PURE__ */ jsx(
               "span",
               {
@@ -12675,7 +12731,7 @@ function Datatable({
                 "data-on": on || void 0,
                 role: "switch",
                 "aria-checked": on,
-                "aria-label": c.headerName,
+                "aria-label": colLabel(c),
                 tabIndex: 0,
                 onKeyDown: (e) => {
                   if (e.key === "Enter" || e.key === " ") {
@@ -12758,7 +12814,7 @@ function Datatable({
         const numeric = c.type === "number";
         const opts = numeric ? [{ value: "", label: "None" }, { value: "sum", label: "Sum" }, { value: "avg", label: "Avg" }, { value: "min", label: "Min" }, { value: "max", label: "Max" }, { value: "count", label: "Count" }] : [{ value: "", label: "None" }, { value: "count", label: "Count" }];
         return /* @__PURE__ */ jsxs("div", { className: "twc-dt__cfg-row", children: [
-          /* @__PURE__ */ jsx("span", { className: "twc-dt__cfg-name", children: c.headerName }),
+          /* @__PURE__ */ jsx("span", { className: "twc-dt__cfg-name", children: colLabel(c) }),
           /* @__PURE__ */ jsx("div", { className: "twc-dt__cfg-ctl", children: /* @__PURE__ */ jsx(
             Select,
             {
@@ -12782,9 +12838,9 @@ function Datatable({
       popGrip("agg")
     ] }) : null,
     panel === "pivot" && panelPos ? (() => {
-      const fieldOpts = ordered.filter((c) => c.type !== "actions").map((c) => ({ value: c.field, label: c.headerName }));
+      const fieldOpts = ordered.filter((c) => c.type !== "actions").map((c) => ({ value: c.field, label: colLabel(c) }));
       const aggOpts = [{ value: "sum", label: "Sum" }, { value: "avg", label: "Avg" }, { value: "min", label: "Min" }, { value: "max", label: "Max" }, { value: "count", label: "Count" }];
-      const valueFieldOpts = ordered.filter((c) => c.type !== "actions" && !pivotConfig.values.some((v) => v.field === c.field)).map((c) => ({ value: c.field, label: c.headerName }));
+      const valueFieldOpts = ordered.filter((c) => c.type !== "actions" && !pivotConfig.values.some((v) => v.field === c.field)).map((c) => ({ value: c.field, label: colLabel(c) }));
       return /* @__PURE__ */ jsxs("div", { className: "twc-dt__pop twc-dt__cfg", style: { top: panelPos.top, left: panelPos.left, width: 320, ...popStyle("pivot") }, "data-pop-sized": popSizes.pivot ? "" : void 0, role: "dialog", "aria-label": "Pivot settings", children: [
         /* @__PURE__ */ jsxs("div", { className: "twc-dt__panel-head", children: [
           /* @__PURE__ */ jsx("span", { className: "twc-dt__panel-title", children: "Pivot" }),
@@ -12853,7 +12909,7 @@ function Datatable({
           /* @__PURE__ */ jsxs("div", { className: "twc-dt__cfg-section", children: [
             /* @__PURE__ */ jsx("span", { className: "twc-dt__cfg-label", children: "Values" }),
             pivotConfig.values.map((v, i) => /* @__PURE__ */ jsxs("div", { className: "twc-dt__cfg-row", children: [
-              /* @__PURE__ */ jsx("span", { className: "twc-dt__cfg-name", children: colByField[v.field]?.headerName || v.field }),
+              /* @__PURE__ */ jsx("span", { className: "twc-dt__cfg-name", children: fieldLabel(v.field) }),
               /* @__PURE__ */ jsx("div", { className: "twc-dt__cfg-ctl", children: /* @__PURE__ */ jsx(
                 Select,
                 {
@@ -12869,7 +12925,7 @@ function Datatable({
                 {
                   type: "button",
                   className: "twc-dt__cfg-x",
-                  "aria-label": `Remove ${colByField[v.field]?.headerName || v.field}`,
+                  "aria-label": `Remove ${fieldLabel(v.field)}`,
                   onClick: () => setPivotConfig((p) => ({ ...p, values: p.values.filter((_, j) => j !== i) })),
                   children: /* @__PURE__ */ jsx(Svg, { d: I.x })
                 }
@@ -12951,7 +13007,7 @@ function Datatable({
                     size: "sm",
                     portal: true,
                     value: f.field,
-                    options: filterableCols.map((c) => ({ value: c.field, label: c.headerName })),
+                    options: filterableCols.map((c) => ({ value: c.field, label: colLabel(c) })),
                     onChange: (v) => {
                       const nc = colByField[v];
                       setFilters((arr) => arr.map((x) => x.id === f.id ? { ...x, field: v, op: opsFor(filterTypeOf(nc))[0].value, value: "" } : x));
@@ -13008,7 +13064,7 @@ function Datatable({
                 ),
                 fieldHandle("val", i)
               ] }),
-              /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__frm-x", "aria-label": `Add another condition on ${col.headerName}`, title: "Add another condition on this column", onClick: () => addFilter(f.field), children: /* @__PURE__ */ jsx(Svg, { d: I.plus }) }),
+              /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__frm-x", "aria-label": `Add another condition on ${colLabel(col)}`, title: "Add another condition on this column", onClick: () => addFilter(f.field), children: /* @__PURE__ */ jsx(Svg, { d: I.plus }) }),
               /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__frm-x", "aria-label": "Remove filter", onClick: () => setFilters((arr) => arr.filter((x) => x.id !== f.id)), children: /* @__PURE__ */ jsx(Svg, { d: I.x }) })
             ] }, f.id);
           }) }),