TablePanel: Show filter icon on correct field when other fields are hidden (#50940) (#50946)

(cherry picked from commit f0b191c1c8)

Co-authored-by: Victor Marin <36818606+mdvictor@users.noreply.github.com>

packages/grafana-ui/src/components/Table/HeaderRow.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { HeaderGroup, Column } from 'react-table';
 
-import { DataFrame, Field } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { useStyles2 } from '../../themes';
@@ -13,12 +12,11 @@ import { getTableStyles, TableStyles } from './styles';
 
 export interface HeaderRowProps {
   headerGroups: HeaderGroup[];
-  data: DataFrame;
   showTypeIcons?: boolean;
 }
 
 export const HeaderRow = (props: HeaderRowProps) => {
-  const { headerGroups, data, showTypeIcons } = props;
+  const { headerGroups, showTypeIcons } = props;
   const e2eSelectorsTable = selectors.components.Panels.Visualization.Table;
   const tableStyles = useStyles2(getTableStyles);
 
@@ -35,7 +33,7 @@ export const HeaderRow = (props: HeaderRowProps) => {
             role="row"
           >
             {headerGroup.headers.map((column: Column, index: number) =>
-              renderHeaderCell(column, tableStyles, data.fields[index], showTypeIcons)
+              renderHeaderCell(column, tableStyles, showTypeIcons)
             )}
           </div>
         );
@@ -44,8 +42,9 @@ export const HeaderRow = (props: HeaderRowProps) => {
   );
 };
 
-function renderHeaderCell(column: any, tableStyles: TableStyles, field?: Field, showTypeIcons?: boolean) {
+function renderHeaderCell(column: any, tableStyles: TableStyles, showTypeIcons?: boolean) {
   const headerProps = column.getHeaderProps();
+  const field = column.field ?? null;
 
   if (column.canResize) {
     headerProps.style.userSelect = column.isResizing ? 'none' : 'auto'; // disables selecting text while resizing

packages/grafana-ui/src/components/Table/Table.tsx

@@ -283,7 +283,7 @@ export const Table: FC<Props> = memo((props: Props) => {
     <div {...getTableProps()} className={tableStyles.table} aria-label={ariaLabel} role="table">
       <CustomScrollbar hideVerticalTrack={true}>
         <div className={tableStyles.tableContentWrapper(totalColumnsWidth)}>
-          {!noHeader && <HeaderRow data={data} headerGroups={headerGroups} showTypeIcons={showTypeIcons} />}
+          {!noHeader && <HeaderRow headerGroups={headerGroups} showTypeIcons={showTypeIcons} />}
           {itemCount > 0 ? (
             <FixedSizeList
               height={listHeight}