refactor(table-chart): add comments and edge case handling for sanitizeHeaderId

Addresses additional code review feedback from PR #35968:
- Add explanatory comments documenting why semantic replacements come first
  (preserves meaning in IDs: 'percentpct_nice' vs '_pct_nice')
- Add leading/trailing underscore trimming to handle edge cases
  (e.g., '@col' → 'col' instead of '_col')
- Add comprehensive edge case tests (4 new test blocks, 19 additional assertions)
  covering leading/trailing underscores and special-character-only inputs

Tests: 45 total (13 unit + 2 integration + 30 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

@@ -151,13 +151,19 @@ function cellWidth({
  * Exported for testing.
  */
 export function sanitizeHeaderId(columnId: string): string {
-  return columnId
-    .replace(/%/g, 'percent')
-    .replace(/#/g, 'hash')
-    .replace(/△/g, 'delta')
-    .replace(/\s+/g, '_')
-    .replace(/[^a-zA-Z0-9_-]/g, '_')
-    .replace(/_+/g, '_'); // Collapse consecutive underscores
+  return (
+    columnId
+      // Semantic replacements first: preserve meaning in IDs for readability
+      // (e.g., 'percentpct_nice' instead of '_pct_nice')
+      .replace(/%/g, 'percent')
+      .replace(/#/g, 'hash')
+      .replace(/△/g, 'delta')
+      // Generic sanitization for remaining special characters
+      .replace(/\s+/g, '_')
+      .replace(/[^a-zA-Z0-9_-]/g, '_')
+      .replace(/_+/g, '_') // Collapse consecutive underscores
+      .replace(/^_+|_+$/g, '') // Trim leading/trailing underscores
+  );
 }
 
 /**

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

@@ -68,6 +68,40 @@ test('sanitizeHeaderId should collapse consecutive underscores', () => {
   expect(sanitizeHeaderId('test@@name')).toBe('test_name');
 });
 
+test('sanitizeHeaderId should remove leading underscores', () => {
+  expect(sanitizeHeaderId('@col')).toBe('col');
+  expect(sanitizeHeaderId('!revenue')).toBe('revenue');
+  expect(sanitizeHeaderId('@@test')).toBe('test');
+  expect(sanitizeHeaderId('   leading_spaces')).toBe('leading_spaces');
+});
+
+test('sanitizeHeaderId should remove trailing underscores', () => {
+  expect(sanitizeHeaderId('col@')).toBe('col');
+  expect(sanitizeHeaderId('revenue!')).toBe('revenue');
+  expect(sanitizeHeaderId('test@@')).toBe('test');
+  expect(sanitizeHeaderId('trailing_spaces   ')).toBe('trailing_spaces');
+});
+
+test('sanitizeHeaderId should remove leading and trailing underscores', () => {
+  expect(sanitizeHeaderId('@col@')).toBe('col');
+  expect(sanitizeHeaderId('!test!')).toBe('test');
+  expect(sanitizeHeaderId('  spaced  ')).toBe('spaced');
+  expect(sanitizeHeaderId('@@multiple@@')).toBe('multiple');
+});
+
+test('sanitizeHeaderId should handle inputs with only special characters', () => {
+  expect(sanitizeHeaderId('@')).toBe('');
+  expect(sanitizeHeaderId('@@')).toBe('');
+  expect(sanitizeHeaderId('   ')).toBe('');
+  expect(sanitizeHeaderId('!@$')).toBe('');
+  expect(sanitizeHeaderId('!@#$')).toBe('hash'); // # → 'hash' is preserved (semantic replacement)
+  // Semantic replacements should be preserved even when alone
+  expect(sanitizeHeaderId('%')).toBe('percent');
+  expect(sanitizeHeaderId('#')).toBe('hash');
+  expect(sanitizeHeaderId('△')).toBe('delta');
+  expect(sanitizeHeaderId('% # △')).toBe('percent_hash_delta');
+});
+
 describe('plugin-chart-table', () => {
   describe('transformProps', () => {
     it('should parse pageLength to pageSize', () => {