feat(datagrid-web): add type and format to ds export request

Author: samuelreichert

packages/pluggableWidgets/datagrid-web/src/Datagrid.xml

@@ -121,22 +121,24 @@
                                     <enumerationValue key="boolean">Boolean</enumerationValue>
                                 </enumerationValues>
                             </property>
-                            <property key="exportNumberFormat" type="textTemplate" required="false">
+                            <property key="exportNumberFormat" type="expression" required="false">
                                 <caption>Export number format</caption>
                                 <description>
                                     Optional Excel number format string to apply when exporting numeric values.
                                     You can use any valid SheetJS number format, including currency, percentage, or custom patterns
                                     (e.g. "#,##0.00", "$0.00", "0.00%").
                                     See full syntax reference here: https://docs.sheetjs.com/docs/csf/features/nf/
                                 </description>
+                                <returnType type="String" />
                             </property>
-                            <property key="exportDateFormat" type="textTemplate" required="false">
+                            <property key="exportDateFormat" type="expression" required="false">
                                 <caption>Export date format</caption>
                                 <description>
                                     Optional Excel date format string to apply when exporting Date or DateTime values.
                                     Follows JavaScript date format conventions supported by SheetJS
                                     (e.g. "yyyy-mm-dd", "dd/mm/yyyy hh:mm", "mmm d, yyyy").
                                 </description>
+                                <returnType type="String" />
                             </property>
                             <property key="header" type="textTemplate" required="false">
                                 <caption>Caption</caption>

packages/pluggableWidgets/datagrid-web/src/features/data-export/DSExportRequest.ts

@@ -1,10 +1,10 @@
 import { isAvailable } from "@mendix/widget-plugin-platform/framework/is-available";
 import Big from "big.js";
-import { ListValue, ObjectItem, ValueStatus } from "mendix";
+import { DynamicValue, ListValue, ObjectItem, ValueStatus } from "mendix";
 import { createNanoEvents, Emitter, Unsubscribe } from "nanoevents";
 import { ColumnsType, ShowContentAsEnum } from "../../../typings/DatagridProps";
 
-/** Represents a single Excel cell (SheetJS compatible, simplified) */
+/** Represents a single Excel cell (SheetJS compatible) */
 interface ExcelCell {
     /** Cell type: 's' = string, 'n' = number, 'b' = boolean, 'd' = date */
     t: "s" | "n" | "b" | "d";
@@ -275,13 +275,17 @@ const readers: ReadersByType = {
         }
 
         const value = data.value;
+        const format = getCellFormat({
+            exportType: props.exportType,
+            exportDateFormat: props.exportDateFormat,
+            exportNumberFormat: props.exportNumberFormat
+        });
 
         if (value instanceof Date) {
             return {
-                t: "d", // date cell
+                t: "d",
                 v: value,
-                z: "dd/mm/yyyy hh:mm", // Excel date format
-                w: value.toISOString().split("T")[0] // human-readable fallback
+                z: format
             };
         }
 
@@ -293,22 +297,18 @@ const readers: ReadersByType = {
             };
         }
 
-        // Number (Big or JS number)
         if (value instanceof Big || typeof value === "number") {
             const num = value instanceof Big ? value.toNumber() : value;
             return {
                 t: "n",
                 v: num,
-                z: '"$"#,##0.00_);\\("$"#,##0.00\\)',
-                w: num.toLocaleString(undefined, { minimumFractionDigits: 2 })
+                z: format
             };
         }
 
-        // Default: string (ensure fallback is a string)
         return {
             t: "s",
-            v: data.displayValue ?? "",
-            w: data.displayValue ?? ""
+            v: data.displayValue ?? ""
         };
     },
 
@@ -321,23 +321,49 @@ const readers: ReadersByType = {
 
         switch (data.status) {
             case "available":
-                return { t: "s", v: data.value ?? "", w: data.value ?? "" };
+                const format = getCellFormat({
+                    exportType: props.exportType,
+                    exportDateFormat: props.exportDateFormat,
+                    exportNumberFormat: props.exportNumberFormat
+                });
+                return { t: "s", v: data.value ?? "", z: format };
             case "unavailable":
-                return { t: "s", v: "n/a", w: "n/a" };
+                return { t: "s", v: "n/a" };
             default:
                 return makeEmptyCell();
         }
     },
 
     customContent(item, props) {
         const value = props.exportValue?.get(item).value ?? "";
-        return { t: "s", v: value, w: value };
+        const format = getCellFormat({
+            exportType: props.exportType,
+            exportDateFormat: props.exportDateFormat,
+            exportNumberFormat: props.exportNumberFormat
+        });
+        return { t: "s", v: value, z: format };
     }
 };
 
-// Helper for empty cells
 function makeEmptyCell(): ExcelCell {
-    return { t: "s", v: "", w: "" };
+    return { t: "s", v: "" };
+}
+
+interface DataExportProps {
+    exportType: "text" | "number" | "date" | "boolean";
+    exportDateFormat?: DynamicValue<string>;
+    exportNumberFormat?: DynamicValue<string>;
+}
+
+function getCellFormat({ exportType, exportDateFormat, exportNumberFormat }: DataExportProps): string | undefined {
+    switch (exportType) {
+        case "date":
+            return exportDateFormat?.status === "available" ? exportDateFormat.value : "mm/dd/yyyy";
+        case "number":
+            return exportNumberFormat?.status === "available" ? exportNumberFormat.value : undefined;
+        default:
+            return undefined;
+    }
 }
 
 function createRowReader(columns: ColumnsType[]): RowReader {