perf(table-chart): optimize header ID sanitization and add unit tests

**Performance improvement:**
- Cache sanitized header ID value to avoid recomputing it twice per column
- Compute once at column definition, use for both header `id` and cell `aria-labelledby`

**Test coverage:**
- Added 8 unit tests for `sanitizeHeaderId()` function
- Tests verify all sanitization rules: %, #, △, spaces, and other special chars
- Provides faster diagnostics if sanitization logic changes in future

**Changes:**
- Export `sanitizeHeaderId()` for testing
- Cache sanitized value in `headerId` variable
- Added comprehensive unit test suite

Tests: 40 passed (8 new unit tests + 32 existing)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: sadpandajoe

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

@@ -144,8 +144,9 @@ function cellWidth({
 /**
  * Sanitize a column identifier for use in HTML id attributes and CSS selectors.
  * Replaces characters that are invalid in CSS selectors with safe alternatives.
+ * Exported for testing.
  */
-function sanitizeHeaderId(columnId: string): string {
+export function sanitizeHeaderId(columnId: string): string {
   return columnId
     .replace(/%/g, 'percent')
     .replace(/#/g, 'hash')
@@ -857,6 +858,9 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         }
       }
 
+      // Cache sanitized header ID to avoid recomputing it multiple times
+      const headerId = sanitizeHeaderId(column.originalLabel || column.key);
+
       return {
         id: String(i), // to allow duplicate column keys
         // must use custom accessor to allow `.` in column names
@@ -982,7 +986,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
           }
 
           const cellProps = {
-            'aria-labelledby': `header-${sanitizeHeaderId(column.originalLabel || column.key)}`,
+            'aria-labelledby': `header-${headerId}`,
             role: 'cell',
             // show raw number in title in case of numeric values
             title: typeof value === 'number' ? String(value) : undefined,
@@ -1069,7 +1073,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         },
         Header: ({ column: col, onClick, style, onDragStart, onDrop }) => (
           <th
-            id={`header-${sanitizeHeaderId(column.originalLabel || column.key)}`}
+            id={`header-${headerId}`}
             title={t('Shift + Click to sort by multiple columns')}
             className={[className, col.isSorted ? 'is-sorted' : ''].join(' ')}
             style={{

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

@@ -19,12 +19,50 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@superset-ui/core/spec';
 import { cloneDeep } from 'lodash';
-import TableChart from '../src/TableChart';
+import TableChart, { sanitizeHeaderId } from '../src/TableChart';
 import transformProps from '../src/transformProps';
 import DateWithFormatter from '../src/utils/DateWithFormatter';
 import testData from './testData';
 import { ProviderWrapper } from './testHelpers';
 
+describe('sanitizeHeaderId', () => {
+  test('should sanitize percent sign', () => {
+    expect(sanitizeHeaderId('%pct_nice')).toBe('percentpct_nice');
+  });
+
+  test('should sanitize hash/pound sign', () => {
+    expect(sanitizeHeaderId('# metric_1')).toBe('hash_metric_1');
+  });
+
+  test('should sanitize delta symbol', () => {
+    expect(sanitizeHeaderId('△ delta')).toBe('delta_delta');
+  });
+
+  test('should replace spaces with underscores', () => {
+    expect(sanitizeHeaderId('Main metric_1')).toBe('Main_metric_1');
+    expect(sanitizeHeaderId('multiple  spaces')).toBe('multiple_spaces');
+  });
+
+  test('should handle multiple special characters', () => {
+    expect(sanitizeHeaderId('% #△ test')).toBe('percent_hashdelta_test');
+    expect(sanitizeHeaderId('% # △ test')).toBe('percent_hash_delta_test');
+  });
+
+  test('should preserve alphanumeric, underscore, and hyphen', () => {
+    expect(sanitizeHeaderId('valid-name_123')).toBe('valid-name_123');
+  });
+
+  test('should replace other special characters with underscore', () => {
+    expect(sanitizeHeaderId('col@name!test')).toBe('col_name_test');
+    expect(sanitizeHeaderId('test.column')).toBe('test_column');
+  });
+
+  test('should handle edge cases', () => {
+    expect(sanitizeHeaderId('')).toBe('');
+    expect(sanitizeHeaderId('simple')).toBe('simple');
+  });
+});
+
 describe('plugin-chart-table', () => {
   describe('transformProps', () => {
     it('should parse pageLength to pageSize', () => {