twico-ui 1.35.0 → 1.36.1

package/dist/index.d.cts

@@ -1927,7 +1927,9 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   /** #339: let end-users build their own combined columns at runtime. Adds a **"Combine columns…"** item to
    *  each column's ⋮ menu that opens an editor to fold other columns' data into that column (they show in its
    *  cell and their own columns hide); layout (inline/stacked) + labels are configurable, and "Uncombine"
-   *  restores them. The result is the same as a declarative `column.combine` and persists via `stateKey`.
+   *  restores them. The result is like a declarative `column.combine` and persists via `stateKey` — except a
+   *  runtime combine also applies the source-join value + render over a target's own `valueGetter`/`renderCell`
+   *  (so a synthetic getter-backed column can still be a target), which a declarative `combine` defers to (#369).
    *  @default false */
   columnCombining?: boolean;
   /** Make all columns editable by default (double-click a cell to edit; per-column `editable` overrides). @default false */
@@ -2179,10 +2181,21 @@ interface DatatableColumn<T = any> {
    *  (label-prefixed when `labels`), while the **cell render** additionally applies each source column's
    *  `valueFormatter`. The combined value is synthetic, so the column is display-only (never inline-editable).
    *  Supplying your own `valueGetter` and/or `renderCell` overrides the derived one(s) independently —
-   *  override `valueGetter` alone and the cell shows that value (not the source-join). */
+   *  override `valueGetter` alone and the cell shows that value (not the source-join). **This precedence is
+   *  for a *declarative* `combine` only.** A *runtime* combine the user builds via `columnCombining` (the ⋮ →
+   *  "Combine columns…" editor) is an explicit action, so it applies the source-join value + render even when
+   *  the target column has its own `valueGetter`/`renderCell` — a synthetic getter-backed column can still be
+   *  a combine target (#369). Uncombining restores the column's own value/render. */
   combine?: string[] | { fields: string[]; layout?: "inline" | "stack"; separator?: string; labels?: boolean };
   /** Header label. @default field ("Actions" for actions columns) */
   headerName?: string;
+  /** #367: fully custom column-header renderer — the header analogue of `renderCell`, mirroring MUI
+   *  DataGrid's `renderHeader`. Receives the resolved column and returns the node rendered inside the
+   *  header cell (e.g. a label + a trailing (i) `Tooltip`) in place of `headerName`. `headerName` stays
+   *  the plain-text label used for quick-search, the Columns menu, CSV/Excel export, aggregation, and the
+   *  a11y sort/resize labels, so a custom header never breaks those string consumers — keep it set to that
+   *  label. (A non-string `headerName` also no longer throws in the Columns menu.) */
+  renderHeader?: (args: { column: DatatableColumn<T> }) => React.ReactNode;
   /** Data type. "actions" renders per-row action buttons via getActions. @default "string" */
   type?: "string" | "number" | "actions";
   /** Filter operators + value comparison for this column, **decoupled from the edit `type`** (#270).

package/dist/index.d.ts

@@ -1927,7 +1927,9 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   /** #339: let end-users build their own combined columns at runtime. Adds a **"Combine columns…"** item to
    *  each column's ⋮ menu that opens an editor to fold other columns' data into that column (they show in its
    *  cell and their own columns hide); layout (inline/stacked) + labels are configurable, and "Uncombine"
-   *  restores them. The result is the same as a declarative `column.combine` and persists via `stateKey`.
+   *  restores them. The result is like a declarative `column.combine` and persists via `stateKey` — except a
+   *  runtime combine also applies the source-join value + render over a target's own `valueGetter`/`renderCell`
+   *  (so a synthetic getter-backed column can still be a target), which a declarative `combine` defers to (#369).
    *  @default false */
   columnCombining?: boolean;
   /** Make all columns editable by default (double-click a cell to edit; per-column `editable` overrides). @default false */
@@ -2179,10 +2181,21 @@ interface DatatableColumn<T = any> {
    *  (label-prefixed when `labels`), while the **cell render** additionally applies each source column's
    *  `valueFormatter`. The combined value is synthetic, so the column is display-only (never inline-editable).
    *  Supplying your own `valueGetter` and/or `renderCell` overrides the derived one(s) independently —
-   *  override `valueGetter` alone and the cell shows that value (not the source-join). */
+   *  override `valueGetter` alone and the cell shows that value (not the source-join). **This precedence is
+   *  for a *declarative* `combine` only.** A *runtime* combine the user builds via `columnCombining` (the ⋮ →
+   *  "Combine columns…" editor) is an explicit action, so it applies the source-join value + render even when
+   *  the target column has its own `valueGetter`/`renderCell` — a synthetic getter-backed column can still be
+   *  a combine target (#369). Uncombining restores the column's own value/render. */
   combine?: string[] | { fields: string[]; layout?: "inline" | "stack"; separator?: string; labels?: boolean };
   /** Header label. @default field ("Actions" for actions columns) */
   headerName?: string;
+  /** #367: fully custom column-header renderer — the header analogue of `renderCell`, mirroring MUI
+   *  DataGrid's `renderHeader`. Receives the resolved column and returns the node rendered inside the
+   *  header cell (e.g. a label + a trailing (i) `Tooltip`) in place of `headerName`. `headerName` stays
+   *  the plain-text label used for quick-search, the Columns menu, CSV/Excel export, aggregation, and the
+   *  a11y sort/resize labels, so a custom header never breaks those string consumers — keep it set to that
+   *  label. (A non-string `headerName` also no longer throws in the Columns menu.) */
+  renderHeader?: (args: { column: DatatableColumn<T> }) => React.ReactNode;
   /** Data type. "actions" renders per-row action buttons via getActions. @default "string" */
   type?: "string" | "number" | "actions";
   /** Filter operators + value comparison for this column, **decoupled from the edit `type`** (#270).

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
@@ -9359,7 +9360,7 @@ function Datatable({
       for (const c of columnsProp) if (c && c.field != null) byField[c.field] = c;
       return [DIFF_OP_COLUMN, ...columnsProp.map((c) => {
         const cfg = combineCfg(userCombine[c.field] || c.combine);
-        const base = cfg && !c.valueGetter ? { ...c, valueGetter: combineValueGetter(combineSrcCols(cfg, byField), cfg) } : c;
+        const base = cfg && (!!userCombine[c.field] || !c.valueGetter) ? { ...c, valueGetter: combineValueGetter(combineSrcCols(cfg, byField), cfg) } : c;
         return { ...base, renderCell: (val, row) => renderDiffCell(base, val, row) };
       })];
     },
@@ -9410,15 +9411,17 @@ function Datatable({
       const cfg = combineCfg(userCombine[c.field] || c.combine);
       if (!cfg) continue;
       const srcCols = combineSrcCols(cfg, byField);
+      const explicit = !!userCombine[c.field];
+      const useJoin = explicit || !c.valueGetter;
       out[i] = {
         ...c,
         editable: false,
         // the combined value is synthetic — inline editing would write to a phantom field
-        valueGetter: c.valueGetter || combineValueGetter(srcCols, cfg),
-        // Consumer renderCell wins. If they overrode only valueGetter, fall back to the DEFAULT cell render
-        // (renderCell: undefined) so the cell shows THEIR value — keeping display in sync with what
-        // sort/filter/search/export use — rather than the auto source-join. Otherwise render the combined cell.
-        renderCell: c.renderCell || (c.valueGetter ? void 0 : ((value, row) => renderCombined(srcCols, row, cfg)))
+        valueGetter: useJoin ? combineValueGetter(srcCols, cfg) : c.valueGetter,
+        // In diff mode the diff `columns` memo already wrapped renderCell in renderDiffCell (over the enriched
+        // combined value) — keep that wrapper, or an EXPLICIT combine's `!explicit` short-circuit would strip the
+        // diff arrows / old→new styling (#369 review). Declarative diff already preserved it (c.renderCell truthy).
+        renderCell: isDiff ? c.renderCell : !explicit && c.renderCell || (useJoin ? ((value, row) => renderCombined(srcCols, row, cfg)) : void 0)
       };
     }
     return out;
@@ -9783,7 +9786,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) => {
@@ -9907,6 +9910,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));
@@ -10067,7 +10071,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;
   }
@@ -10420,7 +10424,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) {
@@ -10527,7 +10531,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;
     }
@@ -10535,7 +10539,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");
@@ -11072,7 +11076,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`);
@@ -11435,7 +11439,7 @@ 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;
@@ -11455,7 +11459,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) }),
@@ -11677,8 +11681,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) {
@@ -11973,8 +11977,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,
@@ -12096,8 +12100,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 });
@@ -12115,7 +12119,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
                               ]
                             }
@@ -12151,7 +12155,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,
@@ -12326,15 +12330,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",
                 {
@@ -12374,7 +12378,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: [
@@ -12646,7 +12650,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" ? (
@@ -12659,7 +12663,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 })
@@ -12672,7 +12676,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 })
@@ -12687,7 +12691,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) => {
@@ -12711,17 +12715,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",
               {
@@ -12729,7 +12733,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 === " ") {
@@ -12812,7 +12816,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,
             {
@@ -12836,9 +12840,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" }),
@@ -12907,7 +12911,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,
                 {
@@ -12923,7 +12927,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 })
                 }
@@ -13005,7 +13009,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));
@@ -13062,7 +13066,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);
           }) }),