fix(table): align group headers correctly when filtering time compari… (#37236)

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

@@ -710,9 +710,18 @@ export default function TableChart<D extends DataRecord = DataRecord>(
     );
   };
 
+  // Compute visible columns before groupHeaderColumns to ensure index consistency.
+  // This filters out columns with config.visible === false.
+  const visibleColumnsMeta = useMemo(
+    () => filteredColumnsMeta.filter(col => col.config?.visible !== false),
+    [filteredColumnsMeta],
+  );
+
+  // Use visibleColumnsMeta for groupHeaderColumns to ensure indices match the actual
+  // table columns. This fixes header misalignment when columns are filtered.
   const groupHeaderColumns = useMemo(
-    () => getHeaderColumns(filteredColumnsMeta, isUsingTimeComparison),
-    [filteredColumnsMeta, getHeaderColumns, isUsingTimeComparison],
+    () => getHeaderColumns(visibleColumnsMeta, isUsingTimeComparison),
+    [visibleColumnsMeta, getHeaderColumns, isUsingTimeComparison],
   );
 
   const renderGroupingHeaders = (): JSX.Element => {
@@ -720,12 +729,20 @@ export default function TableChart<D extends DataRecord = DataRecord>(
     const headers: any = [];
     let currentColumnIndex = 0;
 
-    Object.entries(groupHeaderColumns || {}).forEach(([key, value]) => {
+    // Sort entries by their first column index to ensure correct left-to-right order.
+    // Object.entries() maintains insertion order, but when columns are filtered,
+    // the first occurrence of each metric might not match the visual column order.
+    const sortedEntries = Object.entries(groupHeaderColumns || {}).sort(
+      (a, b) => a[1][0] - b[1][0],
+    );
+
+    sortedEntries.forEach(([key, value]) => {
       // Calculate the number of placeholder columns needed before the current header
       const startPosition = value[0];
       const colSpan = value.length;
-      // Retrieve the originalLabel from the first column in this group
-      const firstColumnInGroup = filteredColumnsMeta[startPosition];
+      // Retrieve the originalLabel from the first column in this group.
+      // Use visibleColumnsMeta to ensure consistent indexing with the actual table columns.
+      const firstColumnInGroup = visibleColumnsMeta[startPosition];
       const originalLabel = firstColumnInGroup
         ? columnsMeta.find(col => col.key === firstColumnInGroup.key)
             ?.originalLabel || key
@@ -1204,11 +1221,6 @@ export default function TableChart<D extends DataRecord = DataRecord>(
     ],
   );
 
-  const visibleColumnsMeta = useMemo(
-    () => filteredColumnsMeta.filter(col => col.config?.visible !== false),
-    [filteredColumnsMeta],
-  );
-
   const columns = useMemo(
     () => visibleColumnsMeta.map(getColumnConfigs),
     [visibleColumnsMeta, getColumnConfigs],