diff --git a/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts b/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts
index 4a48cdc8df38b..a4eb2e5e18a94 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts
+++ b/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,
diff --git a/superset-frontend/plugins/plugin-chart-table/src/utils/isEqualColumns.ts b/superset-frontend/plugins/plugin-chart-table/src/utils/isEqualColumns.ts
index fc060e6138523..28731c73c271d 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/utils/isEqualColumns.ts
+++ b/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)
);
}
diff --git a/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx b/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx
index bd859b467c81c..9bc3d90a09dd9 100644
--- a/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx
+++ b/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: ,
+ }),
+ );
+ 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: ,
+ }),
+ );
+ 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();
diff --git a/superset-frontend/plugins/plugin-chart-table/test/testData.ts b/superset-frontend/plugins/plugin-chart-table/test/testData.ts
index 3f464181b7dc9..1f255703f57c1 100644
--- a/superset-frontend/plugins/plugin-chart-table/test/testData.ts
+++ b/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,
};