fix: Currency formatting in Table raw mode (#25248)

superset-frontend/plugins/plugin-chart-table/src/transformProps.ts

@@ -159,7 +159,7 @@ const processColumns = memoizeOne(function processColumns(
       } else if (isPercentMetric) {
         // percent metrics have a default format
         formatter = getNumberFormatter(numberFormat || PERCENT_3_POINT);
-      } else if (isMetric || (isNumber && numberFormat)) {
+      } else if (isMetric || (isNumber && (numberFormat || currency))) {
         formatter = currency
           ? new CurrencyFormatter({
               d3Format: numberFormat,

superset-frontend/plugins/plugin-chart-table/src/utils/isEqualColumns.ts

@@ -39,6 +39,8 @@ export default function isEqualColumns(
     JSON.stringify(a.formData.extraFilters || null) ===
       JSON.stringify(b.formData.extraFilters || null) &&
     JSON.stringify(a.formData.extraFormData || null) ===
-      JSON.stringify(b.formData.extraFormData || null)
+      JSON.stringify(b.formData.extraFormData || null) &&
+    JSON.stringify(a.rawFormData.column_config || null) ===
+      JSON.stringify(b.rawFormData.column_config || null)
   );
 }

superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx

@@ -123,6 +123,47 @@ describe('plugin-chart-table', () => {
       expect(cells[4]).toHaveTextContent('$ 2.47k');
     });
 
+    it('render raw data', () => {
+      const props = transformProps({
+        ...testData.raw,
+        rawFormData: { ...testData.raw.rawFormData },
+      });
+      render(
+        ProviderWrapper({
+          children: <TableChart {...props} sticky={false} />,
+        }),
+      );
+      const cells = document.querySelectorAll('td');
+      expect(document.querySelectorAll('th')[0]).toHaveTextContent('num');
+      expect(cells[0]).toHaveTextContent('1234');
+      expect(cells[1]).toHaveTextContent('10000');
+      expect(cells[1]).toHaveTextContent('0');
+    });
+
+    it('render raw data with currencies', () => {
+      const props = transformProps({
+        ...testData.raw,
+        rawFormData: {
+          ...testData.raw.rawFormData,
+          column_config: {
+            num: {
+              currencyFormat: { symbol: 'USD', symbolPosition: 'prefix' },
+            },
+          },
+        },
+      });
+      render(
+        ProviderWrapper({
+          children: <TableChart {...props} sticky={false} />,
+        }),
+      );
+      const cells = document.querySelectorAll('td');
+      expect(document.querySelectorAll('th')[0]).toHaveTextContent('num');
+      expect(cells[0]).toHaveTextContent('$ 1.23k');
+      expect(cells[1]).toHaveTextContent('$ 10k');
+      expect(cells[2]).toHaveTextContent('$ 0');
+    });
+
     it('render empty data', () => {
       wrap.setProps({ ...transformProps(testData.empty), sticky: false });
       tree = wrap.render();

superset-frontend/plugins/plugin-chart-table/test/testData.ts

@@ -21,6 +21,7 @@ import {
   ChartProps,
   DatasourceType,
   GenericDataType,
+  QueryMode,
   supersetTheme,
 } from '@superset-ui/core';
 import { TableChartProps, TableChartFormData } from '../src/types';
@@ -173,6 +174,33 @@ const advanced: TableChartProps = {
   ],
 };
 
+const raw = {
+  ...advanced,
+  rawFormData: {
+    ...advanced.rawFormData,
+    query_mode: QueryMode.raw,
+    columns: ['num'],
+  },
+  queriesData: [
+    {
+      ...basicQueryResult,
+      colnames: ['num'],
+      coltypes: [GenericDataType.NUMERIC],
+      data: [
+        {
+          num: 1234,
+        },
+        {
+          num: 10000,
+        },
+        {
+          num: 0,
+        },
+      ],
+    },
+  ],
+};
+
 const advancedWithCurrency = {
   ...advanced,
   datasource: {
@@ -198,4 +226,5 @@ export default {
   advanced,
   advancedWithCurrency,
   empty,
+  raw,
 };