fix(TableChart): render cell bars for columns with NULL values (#36819)

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

@@ -26,6 +26,7 @@ import {
 } from '@superset-ui/core/spec';
 import { cloneDeep } from 'lodash';
 import TableChart, { sanitizeHeaderId } from '../src/TableChart';
+import { GenericDataType } from '@apache-superset/core/api/core';
 import transformProps from '../src/transformProps';
 import DateWithFormatter from '../src/utils/DateWithFormatter';
 import testData from './testData';
@@ -803,6 +804,77 @@ describe('plugin-chart-table', () => {
         cells = document.querySelectorAll('td');
       });
 
+      test('render cell bars even when column contains NULL values', () => {
+        const props = transformProps({
+          ...testData.raw,
+          queriesData: [
+            {
+              ...testData.raw.queriesData[0],
+              colnames: ['category', 'value1', 'value2', 'value3', 'value4'],
+              coltypes: [
+                GenericDataType.String,
+                GenericDataType.Numeric,
+                GenericDataType.Numeric,
+                GenericDataType.Numeric,
+                GenericDataType.Numeric,
+              ],
+              data: [
+                {
+                  category: 'Category A',
+                  value1: 10,
+                  value2: 20,
+                  value3: 30,
+                  value4: null,
+                },
+                {
+                  category: 'Category B',
+                  value1: 15,
+                  value2: 25,
+                  value3: 35,
+                  value4: 100,
+                },
+                {
+                  category: 'Category C',
+                  value1: 18,
+                  value2: 28,
+                  value3: 38,
+                  value4: null,
+                },
+              ],
+            },
+          ],
+          rawFormData: {
+            ...testData.raw.rawFormData,
+            show_cell_bars: true,
+            metrics: ['value1', 'value2', 'value3', 'value4'],
+          },
+        });
+
+        const { container } = render(
+          ProviderWrapper({
+            children: <TableChart {...props} sticky={false} />,
+          }),
+        );
+
+        // Get all cell bars - should exist for both columns with and without NULL values
+        const cellBars = container.querySelectorAll('div.cell-bar');
+
+        // Should have cell bars in all numeric columns, even those with NULL values
+        // value1, value2, value3 all have 3 values, value4 has 1 non-NULL value
+        // Total: 3 + 3 + 3 + 1 = 10 cell bars
+        expect(cellBars.length).toBeGreaterThan(0);
+
+        // Specifically check that value4 column (which has NULLs) still renders bars for non-NULL cells
+        const rows = container.querySelectorAll('tbody tr');
+        expect(rows.length).toBe(3);
+
+        // Row 2 should have a cell bar in value4 column (value: 100)
+        const row2Cells = rows[1].querySelectorAll('td');
+        const value4Cell = row2Cells[4]; // 5th column (0-indexed)
+        const value4Bar = value4Cell.querySelector('div.cell-bar');
+        expect(value4Bar).toBeTruthy();
+      });
+
       test('render color with string column color formatter(operator begins with)', () => {
         render(
           ProviderWrapper({