PanelInspect: Clean table display settings from field config (#71226)

* Does not work, hmm..

* now it works

* fixing and refactoring

* remove unused import

public/app/features/dashboard/components/PanelEditor/usePanelLatestData.ts

@@ -30,7 +30,8 @@ export const usePanelLatestData = (
 
     querySubscription.current = panel
       .getQueryRunner()
-      .getData(options)
+      // We apply field config later
+      .getData({ withTransforms: options.withTransforms, withFieldConfig: false })
       .subscribe({
         next: (data) => {
           if (checkSchema) {
@@ -58,7 +59,7 @@ export const usePanelLatestData = (
      * Otherwise, passing different references to the same object might cause troubles.
      */
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [panel, options.withFieldConfig, options.withTransforms]);
+  }, [panel, options.withTransforms]);
 
   return {
     data: latestData,

public/app/features/inspector/InspectDataTab.tsx

@@ -1,4 +1,5 @@
 import { css } from '@emotion/css';
+import { cloneDeep } from 'lodash';
 import React, { PureComponent } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
@@ -9,6 +10,7 @@ import {
   CSVConfig,
   DataFrame,
   DataTransformerID,
+  FieldConfigSource,
   SelectableValue,
   TimeZone,
   transformDataFrame,
@@ -170,12 +172,14 @@ export class InspectDataTab extends PureComponent<Props, State> {
       return applyRawFieldOverrides(data);
     }
 
-    // We need to apply field config even though it was already applied in the PanelQueryRunner.
+    const fieldConfig = this.cleanTableConfigFromFieldConfig(panel.type, panel.fieldConfig);
-    // That's because transformers create new fields and data frames, so i.e. display processor is no longer there
+
+    // We need to apply field config as it's not done by PanelQueryRunner (even when withFieldConfig is true).
+    // It's because transformers create new fields and data frames, and we need to clean field config of any table settings.
     return applyFieldOverrides({
       data,
       theme: config.theme2,
-      fieldConfig: panel.fieldConfig,
+      fieldConfig,
       timeZone,
       replaceVariables: (value: string) => {
         return value;
@@ -183,6 +187,29 @@ export class InspectDataTab extends PureComponent<Props, State> {
     });
   }
 
+  // Because we visualize this data in a table we have to remove any custom table display settings
+  cleanTableConfigFromFieldConfig(panelPluginId: string, fieldConfig: FieldConfigSource): FieldConfigSource {
+    if (panelPluginId !== 'table') {
+      return fieldConfig;
+    }
+
+    fieldConfig = cloneDeep(fieldConfig);
+    // clear all table specific options
+    fieldConfig.defaults.custom = {};
+
+    // clear all table override properties
+    for (const override of fieldConfig.overrides) {
+      for (const prop of override.properties) {
+        if (prop.id.startsWith('custom.')) {
+          const index = override.properties.indexOf(prop);
+          override.properties.slice(index, 1);
+        }
+      }
+    }
+
+    return fieldConfig;
+  }
+
   render() {
     const { isLoading, options, data, panel, onOptionsChange, app } = this.props;
     const { dataFrameIndex, transformId, transformationOptions, selectedDataFrame, downloadForExcel } = this.state;