feat(datagrid-web): use attribute formatter for default Excel export type

Author: yordan-st

packages/pluggableWidgets/datagrid-web/CHANGELOG.md

@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- We added support for using the attribute's own formatting when exporting to Excel with the "Default" export type. Numbers and dates now export with their configured precision and pattern instead of raw values.
+
+### Fixed
+
+- We fixed an issue where export type and format properties were visible in Studio Pro for dynamic text columns, even though they have no effect.
+
 ## [3.11.1] - 2026-06-18
 
 ### Fixed

packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts

@@ -57,13 +57,19 @@ export function getProperties(values: DatagridPreviewProps, defaultProperties: P
         if (column.minWidth !== "manual") {
             hidePropertyIn(defaultProperties, values, "columns", index, "minWidthLimit");
         }
-        // Hide exportNumberFormat if exportType is not 'number'
-        if (column.exportType !== "number") {
-            hidePropertyIn(defaultProperties, values, "columns", index, "exportNumberFormat" as any);
-        }
-        // Hide exportDateFormat if exportType is not 'date'
-        if (column.exportType !== "date") {
-            hidePropertyIn(defaultProperties, values, "columns", index, "exportDateFormat" as any);
+        if (column.showContentAs === "dynamicText") {
+            hideNestedPropertiesIn(defaultProperties, values, "columns", index, [
+                "exportType",
+                "exportNumberFormat",
+                "exportDateFormat"
+            ] as any);
+        } else {
+            if (column.exportType !== "number") {
+                hidePropertyIn(defaultProperties, values, "columns", index, "exportNumberFormat" as any);
+            }
+            if (column.exportType !== "date") {
+                hidePropertyIn(defaultProperties, values, "columns", index, "exportDateFormat" as any);
+            }
         }
     });
 

packages/pluggableWidgets/datagrid-web/src/features/data-export/__tests__/cell-readers.spec.ts

@@ -68,6 +68,63 @@ describe("cell-readers", () => {
             expect(cell.v).toBe(false);
         });
 
+        it("uses attribute number formatter when exportType is default", () => {
+            const attr = listAttribute(() => new Big("1234.56")) as any;
+            attr.formatter = { type: "number", config: { groupDigits: true, decimalPrecision: 2 } };
+            const col = column("Amount", c => {
+                c.showContentAs = "attribute";
+                c.attribute = attr;
+                c.exportType = "default";
+            });
+            const cell = readSingleCell(col);
+            expect(cell.t).toBe("n");
+            expect(cell.v).toBe(1234.56);
+            expect(cell.z).toBe("#,##0.00");
+        });
+
+        it("uses attribute date formatter when exportType is default", () => {
+            const testDate = new Date("2024-06-15T10:30:00Z");
+            const attr = listAttribute(() => testDate) as any;
+            attr.formatter = { type: "datetime", config: { type: "custom", pattern: "dd/MM/yyyy" } };
+            const col = column("Created", c => {
+                c.showContentAs = "attribute";
+                c.attribute = attr;
+                c.exportType = "default";
+            });
+            const cell = readSingleCell(col);
+            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 no format for default datetime with non-custom config", () => {
+            const testDate = new Date("2024-06-15T10:30:00Z");
+            const attr = listAttribute(() => testDate) as any;
+            attr.formatter = { type: "datetime", config: { type: "date" } };
+            const col = column("Created", c => {
+                c.showContentAs = "attribute";
+                c.attribute = attr;
+                c.exportType = "default";
+            });
+            const cell = readSingleCell(col);
+            expect(cell.t).toBe("d");
+            expect(cell.z).toBe("dd-mm-yyyy");
+        });
+
+        it("uses attribute number formatter without decimals", () => {
+            const attr = listAttribute(() => new Big("42")) as any;
+            attr.formatter = { type: "number", config: { groupDigits: false, decimalPrecision: 0 } };
+            const col = column("Count", c => {
+                c.showContentAs = "attribute";
+                c.attribute = attr;
+                c.exportType = "default";
+            });
+            const cell = readSingleCell(col);
+            expect(cell.t).toBe("n");
+            expect(cell.v).toBe(42);
+            expect(cell.z).toBe("0");
+        });
+
         it("exports date attribute with format as date cell", () => {
             const testDate = new Date("2024-06-15T10:30:00Z");
             const col = column("Created", c => {

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

@@ -113,6 +113,27 @@ function countSignificantDigits(value: Big): number {
     return stripped.length || 1;
 }
 
+function getAttributeDefaultFormat(props: ColumnsType): string | undefined {
+    const formatter = props.attribute?.formatter;
+    if (!formatter) {
+        return undefined;
+    }
+
+    if (formatter.type === "datetime") {
+        const cfg = formatter.config;
+        return cfg.type === "custom" ? cfg.pattern.replace(/M/g, "m") : undefined;
+    }
+
+    if (formatter.type === "number") {
+        const cfg = formatter.config;
+        const decimals = cfg.decimalPrecision ?? 0;
+        const base = cfg.groupDigits ? "#,##0" : "0";
+        return decimals > 0 ? `${base}.${"0".repeat(decimals)}` : base;
+    }
+
+    return undefined;
+}
+
 const readers: ReadersByType = {
     attribute(item, props) {
         const data = props.attribute?.get(item);
@@ -122,11 +143,14 @@ const readers: ReadersByType = {
         }
 
         const value = data.value;
-        const format = getCellFormat({
-            exportType: props.exportType,
-            exportDateFormat: props.exportDateFormat,
-            exportNumberFormat: props.exportNumberFormat
-        });
+        const format =
+            props.exportType === "default"
+                ? getAttributeDefaultFormat(props)
+                : getCellFormat({
+                      exportType: props.exportType,
+                      exportDateFormat: props.exportDateFormat,
+                      exportNumberFormat: props.exportNumberFormat
+                  });
 
         if (value instanceof Date) {
             const dateValue = format && hasTimeComponent(format) ? value : stripTime(value);