Table: Fixes issue with field config applied to wrong fields when hiding columns (#43376)

* Table: Fixes issue with field config applied to wrong fields when hiding columns

* Minor refactoring

* Fixing comment

* Rename to field

* Forgot to save test file

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

@@ -175,8 +175,6 @@ export const Table: FC<Props> = memo((props: Props) => {
     useResizeColumns
   );
 
-  const { fields } = data;
-
   const RenderRow = React.useCallback(
     ({ index: rowIndex, style }) => {
       const row = rows[rowIndex];
@@ -186,7 +184,6 @@ export const Table: FC<Props> = memo((props: Props) => {
           {row.cells.map((cell: Cell, index: number) => (
             <TableCell
               key={index}
-              field={fields[index]}
               tableStyles={tableStyles}
               cell={cell}
               onCellFilterAdded={onCellFilterAdded}
@@ -197,7 +194,7 @@ export const Table: FC<Props> = memo((props: Props) => {
         </div>
       );
     },
-    [fields, onCellFilterAdded, prepareRow, rows, tableStyles]
+    [onCellFilterAdded, prepareRow, rows, tableStyles]
   );
 
   const headerHeight = noHeader ? 0 : tableStyles.cellHeight;

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

@@ -1,20 +1,19 @@
 import React, { FC } from 'react';
 import { Cell } from 'react-table';
-import { Field } from '@grafana/data';
-import { TableFilterActionCallback } from './types';
+import { GrafanaTableColumn, TableFilterActionCallback } from './types';
 import { TableStyles } from './styles';
 
 export interface Props {
   cell: Cell;
-  field: Field;
   tableStyles: TableStyles;
   onCellFilterAdded?: TableFilterActionCallback;
   columnIndex: number;
   columnCount: number;
 }
 
-export const TableCell: FC<Props> = ({ cell, field, tableStyles, onCellFilterAdded, columnIndex, columnCount }) => {
+export const TableCell: FC<Props> = ({ cell, tableStyles, onCellFilterAdded, columnIndex, columnCount }) => {
   const cellProps = cell.getCellProps();
+  const field = ((cell.column as any) as GrafanaTableColumn).field;
 
   if (!field.display) {
     return null;

packages/grafana-ui/src/components/Table/types.ts

@@ -1,7 +1,8 @@
-import { CellProps } from 'react-table';
-import { Field, KeyValue } from '@grafana/data';
+import { CellProps, Column, Row } from 'react-table';
+import { Field, KeyValue, SelectableValue } from '@grafana/data';
 import { TableStyles } from './styles';
 import { FC } from 'react';
+import { Property } from 'csstype';
 
 export { TableFieldOptions, TableCellDisplayMode, FieldTextAlignment } from '@grafana/schema';
 
@@ -33,3 +34,11 @@ export interface TableCellProps extends CellProps<any> {
 export type CellComponent = FC<TableCellProps>;
 
 export type FooterItem = Array<KeyValue<string>> | string | undefined;
+
+export type GrafanaTableColumn = Column & {
+  field: Field;
+  sortType: 'number' | 'basic' | 'alphanumeric-insensitive';
+  filter: (rows: Row[], id: string, filterValues?: SelectableValue[]) => SelectableValue[];
+  justifyContent: Property.JustifyContent;
+  minWidth: number;
+};

packages/grafana-ui/src/components/Table/utils.test.ts

@@ -55,6 +55,13 @@ describe('Table utils', () => {
       expect(columns[0].width).toBe(450);
       expect(columns[1].width).toBe(100);
     });
+
+    it('Should set field on columns', () => {
+      const columns = getColumns(getData(), 1000, 120);
+
+      expect(columns[0].field.name).toBe('Time');
+      expect(columns[1].field.name).toBe('Value');
+    });
   });
 
   describe('getTextAlign', () => {

packages/grafana-ui/src/components/Table/utils.ts

@@ -1,4 +1,4 @@
-import { Column, Row } from 'react-table';
+import { Row } from 'react-table';
 import memoizeOne from 'memoize-one';
 import { Property } from 'csstype';
 import {
@@ -12,7 +12,7 @@ import {
 
 import { DefaultCell } from './DefaultCell';
 import { BarGaugeCell } from './BarGaugeCell';
-import { CellComponent, TableCellDisplayMode, TableFieldOptions, FooterItem } from './types';
+import { CellComponent, TableCellDisplayMode, TableFieldOptions, FooterItem, GrafanaTableColumn } from './types';
 import { JSONViewCell } from './JSONViewCell';
 import { ImageCell } from './ImageCell';
 import { getFooterValue } from './FooterRow';
@@ -47,8 +47,8 @@ export function getColumns(
   availableWidth: number,
   columnMinWidth: number,
   footerValues?: FooterItem[]
-): Column[] {
-  const columns: any[] = [];
+): GrafanaTableColumn[] {
+  const columns: GrafanaTableColumn[] = [];
   let fieldCountWithoutWidth = 0;
 
   for (const [fieldIndex, field] of data.fields.entries()) {
@@ -64,7 +64,7 @@ export function getColumns(
       fieldCountWithoutWidth++;
     }
 
-    const selectSortType = (type: FieldType): string => {
+    const selectSortType = (type: FieldType) => {
       switch (type) {
         case FieldType.number:
           return 'number';
@@ -79,13 +79,14 @@ export function getColumns(
     columns.push({
       Cell,
       id: fieldIndex.toString(),
+      field: field,
       Header: getFieldDisplayName(field, data),
       accessor: (row: any, i: number) => {
         return field.values.get(i);
       },
       sortType: selectSortType(field.type),
       width: fieldTableOptions.width,
-      minWidth: fieldTableOptions.minWidth || columnMinWidth,
+      minWidth: fieldTableOptions.minWidth ?? columnMinWidth,
       filter: memoizeOne(filterByValue(field)),
       justifyContent: getTextAlign(field),
       Footer: getFooterValue(fieldIndex, footerValues),