fix(datagrid-web): export booleans as native cells and dates with locale format

samuelreichert · samuelreichert · commit 6757af1f8abf · 2026-05-22T16:06:40.000+02:00
diff --git a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
@@ -16,7 +16,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - We fixed an issue where exported date values included a hidden time component even when the format specified date-only parts.
 
-- We fixed an issue where boolean values exported as TRUE/FALSE instead of Yes/No to match the display in the grid.
+- We fixed an issue where boolean values were not exported as proper Excel boolean cells. Both attribute and custom content columns now export as native booleans (TRUE/FALSE) recognized by Excel.
 
 - We fixed an issue where numbers with more than 15 significant digits lost precision during Excel export. Such values are now exported as text to preserve all digits.
 
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/data-export/__tests__/cell-readers.spec.ts b/packages/pluggableWidgets/datagrid-web/src/features/data-export/__tests__/cell-readers.spec.ts
@@ -1,6 +1,8 @@
-import Big from "big.js";
-import { listAttribute, listExpression, dynamic, obj } from "@mendix/widget-plugin-test-utils";
+jest.mock("mendix", () => ({}), { virtual: true });
+
+import { Big } from "big.js";
 import { ObjectItem } from "mendix";
+import { listAttribute, listExpression, dynamic, obj } from "@mendix/widget-plugin-test-utils";
 import { column } from "../../../utils/test-utils";
 import { readChunk, ExcelCell } from "../cell-readers";
 
@@ -46,24 +48,24 @@ describe("cell-readers", () => {
             expect(cell.z).toBe("#,##0.00");
         });
 
-        it("exports boolean attribute as Yes/No string cell", () => {
+        it("exports boolean attribute as boolean cell", () => {
             const col = column("Active", c => {
                 c.showContentAs = "attribute";
                 c.attribute = listAttribute(() => true);
             });
             const cell = readSingleCell(col);
-            expect(cell.t).toBe("s");
-            expect(cell.v).toBe("Yes");
+            expect(cell.t).toBe("b");
+            expect(cell.v).toBe(true);
         });
 
-        it("exports false boolean attribute as No", () => {
+        it("exports false boolean attribute as boolean cell", () => {
             const col = column("Active", c => {
                 c.showContentAs = "attribute";
                 c.attribute = listAttribute(() => false);
             });
             const cell = readSingleCell(col);
-            expect(cell.t).toBe("s");
-            expect(cell.v).toBe("No");
+            expect(cell.t).toBe("b");
+            expect(cell.v).toBe(false);
         });
 
         it("exports date attribute with format as date cell", () => {
@@ -80,16 +82,17 @@ describe("cell-readers", () => {
             expect(cell.z).toBe("yyyy-mm-dd");
         });
 
-        it("exports date attribute without format as string cell (displayValue)", () => {
+        it("exports date attribute without format using default date format", () => {
             const testDate = new Date("2024-06-15T10:30:00Z");
             const col = column("Created", c => {
                 c.showContentAs = "attribute";
                 c.attribute = listAttribute(() => testDate);
                 c.exportType = "default";
             });
             const cell = readSingleCell(col);
-            expect(cell.t).toBe("s");
-            expect(cell.v).toBe(`Formatted ${testDate}`);
+            expect(cell.t).toBe("d");
+            expect(cell.v).toEqual(new Date(Date.UTC(2024, 5, 15)));
+            expect(cell.z).toBe("dd-mm-yyyy");
         });
 
         it("returns empty cell when attribute is not available", () => {
@@ -125,7 +128,7 @@ describe("cell-readers", () => {
         it("returns n/a cell when dynamicText is unavailable", () => {
             const col = column("Label", c => {
                 c.showContentAs = "dynamicText";
-                c.dynamicText = listExpression(() => "text", "unavailable");
+                c.dynamicText = { get: () => ({ status: "unavailable", value: undefined }) } as any;
             });
             const cell = readSingleCell(col);
             expect(cell.t).toBe("s");
@@ -226,15 +229,16 @@ describe("cell-readers", () => {
             expect(cell.z).toBe("yyyy-mm-dd");
         });
 
-        it("exports date as string when no format provided", () => {
+        it("exports date with default format when no format provided", () => {
             const col = column("Created", c => {
                 c.showContentAs = "customContent";
                 c.exportValue = listExpression(() => "2024-06-15T10:30:00Z");
                 c.exportType = "date";
             });
             const cell = readSingleCell(col);
-            expect(cell.t).toBe("s");
-            expect(cell.v).toBe("2024-06-15T10:30:00Z");
+            expect(cell.t).toBe("d");
+            expect(cell.v).toEqual(new Date(Date.UTC(2024, 5, 15)));
+            expect(cell.z).toBe("dd-mm-yyyy");
         });
 
         it("falls back to string when date parse fails", () => {
@@ -260,6 +264,65 @@ describe("cell-readers", () => {
             expect(cell.t).toBe("s");
             expect(cell.v).toBe("");
         });
+
+        it("exports as boolean true when exportType is boolean and value is 'true'", () => {
+            const col = column("Active", c => {
+                c.showContentAs = "customContent";
+                c.exportValue = listExpression(() => "true");
+                c.exportType = "boolean";
+            });
+            const cell = readSingleCell(col);
+            expect(cell.t).toBe("b");
+            expect(cell.v).toBe(true);
+        });
+
+        it("exports as boolean false when exportType is boolean and value is 'false'", () => {
+            const col = column("Active", c => {
+                c.showContentAs = "customContent";
+                c.exportValue = listExpression(() => "false");
+                c.exportType = "boolean";
+            });
+            const cell = readSingleCell(col);
+            expect(cell.t).toBe("b");
+            expect(cell.v).toBe(false);
+        });
+
+        it("exports boolean true for case-insensitive values", () => {
+            for (const val of ["True", "YES", "1"]) {
+                const col = column("Active", c => {
+                    c.showContentAs = "customContent";
+                    c.exportValue = listExpression(() => val);
+                    c.exportType = "boolean";
+                });
+                const cell = readSingleCell(col);
+                expect(cell.t).toBe("b");
+                expect(cell.v).toBe(true);
+            }
+        });
+
+        it("exports boolean false for case-insensitive values", () => {
+            for (const val of ["False", "NO", "0"]) {
+                const col = column("Active", c => {
+                    c.showContentAs = "customContent";
+                    c.exportValue = listExpression(() => val);
+                    c.exportType = "boolean";
+                });
+                const cell = readSingleCell(col);
+                expect(cell.t).toBe("b");
+                expect(cell.v).toBe(false);
+            }
+        });
+
+        it("falls back to string for unrecognized boolean value", () => {
+            const col = column("Active", c => {
+                c.showContentAs = "customContent";
+                c.exportValue = listExpression(() => "maybe");
+                c.exportType = "boolean";
+            });
+            const cell = readSingleCell(col);
+            expect(cell.t).toBe("s");
+            expect(cell.v).toBe("maybe");
+        });
     });
 
     describe("long number precision", () => {
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/data-export/cell-readers.ts b/packages/pluggableWidgets/datagrid-web/src/features/data-export/cell-readers.ts
@@ -1,13 +1,13 @@
-import Big from "big.js";
+import { Big } from "big.js";
 import { DynamicValue, ObjectItem } from "mendix";
 import { ColumnsType, ShowContentAsEnum } from "../../../typings/DatagridProps";
 
 /** Represents a single Excel cell (SheetJS compatible) */
 export interface ExcelCell {
-    /** Cell type: 's' = string, 'n' = number, 'd' = date */
-    t: "s" | "n" | "d";
+    /** Cell type: 's' = string, 'n' = number, 'b' = boolean, 'd' = date */
+    t: "s" | "n" | "b" | "d";
     /** Underlying value */
-    v: string | number | Date;
+    v: string | number | boolean | Date;
     /** Optional Excel number/date format, e.g. "yyyy-mm-dd" or "$0.00" */
     z?: string;
     /** Optional pre-formatted display text */
@@ -68,20 +68,28 @@ export function excelString(value: string, format?: string): ExcelCell {
     };
 }
 
-export function excelDate(value: string): ExcelCell;
-export function excelDate(value: Date, format: string): ExcelCell;
-export function excelDate(value: string | Date, format?: string): ExcelCell {
+const FALLBACK_DATE_FORMAT = "dd-mm-yyyy";
+
+function getDefaultDateFormat(): string {
+    const pattern = window.mx?.session.getConfig().locale.patterns.date;
+    if (!pattern) {
+        return FALLBACK_DATE_FORMAT;
+    }
+    return pattern.replace(/M/g, "m");
+}
+
+export function excelDate(value: Date, format?: string): ExcelCell {
     return {
-        t: value instanceof Date && format !== undefined ? "d" : "s",
+        t: "d",
         v: value,
-        z: format
+        z: format ?? getDefaultDateFormat()
     };
 }
 
 export function excelBoolean(value: boolean): ExcelCell {
     return {
-        t: "s",
-        v: value ? "Yes" : "No"
+        t: "b",
+        v: value
     };
 }
 
@@ -121,10 +129,7 @@ const readers: ReadersByType = {
         });
 
         if (value instanceof Date) {
-            if (format === undefined) {
-                return excelDate(data.displayValue);
-            }
-            const dateValue = hasTimeComponent(format) ? value : stripTime(value);
+            const dateValue = format && hasTimeComponent(format) ? value : stripTime(value);
             return excelDate(dateValue, format);
         }
 
@@ -158,30 +163,38 @@ const readers: ReadersByType = {
 
     customContent(item, props) {
         const value = props.exportValue?.get(item).value ?? "";
+        const { exportType } = props;
         const format = getCellFormat({
-            exportType: props.exportType,
+            exportType,
             exportDateFormat: props.exportDateFormat,
             exportNumberFormat: props.exportNumberFormat
         });
 
-        if (props.exportType === "number" && value.trim() !== "") {
+        if (exportType === "number" && value.trim() !== "") {
             const parsed = Number(value);
             if (!Number.isNaN(parsed)) {
                 return excelNumber(parsed, format);
             }
         }
 
-        if (props.exportType === "date" && value !== "") {
+        if (exportType === "date" && value !== "") {
             const parsed = new Date(value);
             if (!isNaN(parsed.getTime())) {
-                if (format === undefined) {
-                    return excelDate(value);
-                }
-                const dateValue = hasTimeComponent(format) ? parsed : stripTime(parsed);
+                const dateValue = format && hasTimeComponent(format) ? parsed : stripTime(parsed);
                 return excelDate(dateValue, format);
             }
         }
 
+        if (exportType === "boolean") {
+            const lower = value.trim().toLowerCase();
+            if (lower === "true" || lower === "yes" || lower === "1") {
+                return excelBoolean(true);
+            }
+            if (lower === "false" || lower === "no" || lower === "0") {
+                return excelBoolean(false);
+            }
+        }
+
         return excelString(value, format);
     }
 };
diff --git a/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts b/packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts
@@ -3,8 +3,8 @@
  * WARNING: All changes made to this file will be overwritten
  * @author Mendix Widgets Framework Team
  */
+import { ActionValue, DynamicValue, EditableValue, ListActionValue, ListAttributeListValue, ListAttributeValue, ListExpressionValue, ListValue, ListWidgetValue, SelectionMultiValue, SelectionSingleValue } from "mendix";
 import { ComponentType, CSSProperties, ReactNode } from "react";
-import { ActionValue, DynamicValue, EditableValue, ListValue, ListActionValue, ListAttributeValue, ListAttributeListValue, ListExpressionValue, ListWidgetValue, SelectionSingleValue, SelectionMultiValue } from "mendix";
 import { Big } from "big.js";
 
 export type ShowContentAsEnum = "attribute" | "dynamicText" | "customContent";
diff --git a/packages/pluggableWidgets/datagrid-web/typings/global.d.ts b/packages/pluggableWidgets/datagrid-web/typings/global.d.ts
@@ -0,0 +1,21 @@
+interface MXSessionLocale {
+    patterns: {
+        date: string;
+        datetime: string;
+        time: string;
+    };
+}
+
+interface MXGlobalObject {
+    session: {
+        getConfig(): { locale: MXSessionLocale };
+    };
+}
+
+declare global {
+    interface Window {
+        mx?: MXGlobalObject;
+    }
+}
+
+export {};
