TablePanel: support hiding columns, but use them in DataLinks (#41443)

packages/grafana-schema/src/schema/graph.gen.ts

@@ -274,6 +274,7 @@ export interface TableFieldOptions {
   hidden?: boolean;
   minWidth?: number;
   width?: number;
+  filterable?: boolean;
 }
 
 export const defaultTableFieldOptions: TableFieldOptions = {

packages/grafana-schema/src/schema/table.cue

@@ -11,4 +11,5 @@ TableFieldOptions: {
 	align:       FieldTextAlignment | *"auto"
 	displayMode: TableCellDisplayMode | *"auto"
 	hidden?:     bool // ?? default is missing or false ??
+	filterable?: bool
 } @cuetsy(kind="interface")

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

@@ -49,7 +49,7 @@ export function getColumns(
   footerValues?: FooterItem[]
 ): Column[] {
   const columns: any[] = [];
-  let fieldCountWithoutWidth = data.fields.length;
+  let fieldCountWithoutWidth = 0;
 
   for (const [fieldIndex, field] of data.fields.entries()) {
     const fieldTableOptions = (field.config.custom || {}) as TableFieldOptions;
@@ -60,7 +60,8 @@ export function getColumns(
 
     if (fieldTableOptions.width) {
       availableWidth -= fieldTableOptions.width;
-      fieldCountWithoutWidth -= 1;
+    } else {
+      fieldCountWithoutWidth++;
     }
 
     const selectSortType = (type: FieldType): string => {

public/app/plugins/panel/table/models.cue

@@ -28,13 +28,7 @@ Panel: {
                     showTypeIcons: bool | *false
                     sortBy?: [...ui.TableSortByFieldState]
                 }
-                PanelFieldConfig: {
-                    width?: int
-                    minWidth?: int
-                    align?: string | *"auto"
-                    displayMode?: string | *"auto" // TODO? TableCellDisplayMode
-                    filterable?: bool
-                }
+                PanelFieldConfig: ui.TableFieldOptions
             },
         ]
     ]

public/app/plugins/panel/table/models.gen.ts

@@ -4,6 +4,7 @@
 //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 import { TableCellDisplayMode, TableSortByFieldState } from '@grafana/ui';
+import { TableFieldOptions } from '@grafana/schema';
 
 // Only the latest schema version is translated to TypeScript, on the premise
 // that either the dashboard loading process, or (eventually) CUE-defined
@@ -35,15 +36,7 @@ export const defaultPanelOptions: PanelOptions = {
   },
 };
 
-export interface PanelFieldConfig {
-  width?: number;
-  minWidth?: number;
-  align?: string;
-  displayMode?: TableCellDisplayMode;
-  filterable?: boolean;
-}
-
-export const defaultPanelFieldConfig: PanelFieldConfig = {
+export const defaultPanelFieldConfig: TableFieldOptions = {
   displayMode: TableCellDisplayMode.Auto,
   align: 'auto',
 };

public/app/plugins/panel/table/module.tsx

@@ -7,12 +7,13 @@ import {
   standardEditorsRegistry,
 } from '@grafana/data';
 import { TablePanel } from './TablePanel';
-import { PanelOptions, PanelFieldConfig, defaultPanelOptions, defaultPanelFieldConfig } from './models.gen';
+import { PanelOptions, defaultPanelOptions, defaultPanelFieldConfig } from './models.gen';
+import { TableFieldOptions } from '@grafana/schema';
 import { tableMigrationHandler, tablePanelChangedHandler } from './migrations';
 import { TableCellDisplayMode } from '@grafana/ui';
 import { TableSuggestionsSupplier } from './suggestions';
 
-export const plugin = new PanelPlugin<PanelOptions, PanelFieldConfig>(TablePanel)
+export const plugin = new PanelPlugin<PanelOptions, TableFieldOptions>(TablePanel)
   .setPanelChangeHandler(tablePanelChangedHandler)
   .setMigrationHandler(tableMigrationHandler)
   .setNoPadding()
@@ -79,6 +80,12 @@ export const plugin = new PanelPlugin<PanelOptions, PanelFieldConfig>(TablePanel
           name: 'Column filter',
           description: 'Enables/disables field filters in table',
           defaultValue: defaultPanelFieldConfig.filterable,
+        })
+        .addBooleanSwitch({
+          path: 'hidden',
+          name: 'Hide in table',
+          defaultValue: undefined,
+          hideFromDefaults: true,
         });
     },
   })

public/app/plugins/panel/table/suggestions.ts

@@ -1,10 +1,11 @@
 import { VisualizationSuggestionsBuilder } from '@grafana/data';
+import { TableFieldOptions } from '@grafana/schema';
 import { SuggestionName } from 'app/types/suggestions';
-import { PanelOptions, PanelFieldConfig } from './models.gen';
+import { PanelOptions } from './models.gen';
 
 export class TableSuggestionsSupplier {
   getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
-    const list = builder.getListAppender<PanelOptions, PanelFieldConfig>({
+    const list = builder.getListAppender<PanelOptions, TableFieldOptions>({
       name: '',
       pluginId: 'table',
       options: {},