twico-ui 1.35.0 → 1.36.0

package/dist/index.d.cts

@@ -2183,6 +2183,13 @@ interface DatatableColumn<T = any> {
   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

@@ -2183,6 +2183,13 @@ interface DatatableColumn<T = any> {
   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
@@ -9783,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) => {
@@ -9907,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));
@@ -10067,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;
   }
@@ -10420,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) {
@@ -10527,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;
     }
@@ -10535,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");
@@ -11072,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`);
@@ -11435,7 +11437,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 +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) }),
@@ -11677,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) {
@@ -11973,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,
@@ -12096,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 });
@@ -12115,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
                               ]
                             }
@@ -12151,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,
@@ -12326,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",
                 {
@@ -12374,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: [
@@ -12646,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" ? (
@@ -12659,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 })
@@ -12672,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 })
@@ -12687,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) => {
@@ -12711,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",
               {
@@ -12729,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 === " ") {
@@ -12812,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,
             {
@@ -12836,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" }),
@@ -12907,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,
                 {
@@ -12923,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 })
                 }
@@ -13005,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));
@@ -13062,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);
           }) }),