TablePanel: Refactor to functional component and move add ad hoc filter action to PanelContext (#61360)

* FieldOptions: Add filterable as registry added field item

* Refactor to functional component, move ad hoc filter to PanelStateWrapper

* review tweaks

packages/grafana-ui/src/components/PanelChrome/PanelContext.ts

@@ -10,6 +10,8 @@ import {
   CoreApp,
 } from '@grafana/data';
 
+import { AdHocFilterItem } from '../Table/types';
+
 import { SeriesVisibilityChangeMode } from '.';
 
 /** @alpha */
@@ -38,6 +40,11 @@ export interface PanelContext {
   onAnnotationUpdate?: (annotation: AnnotationEventUIModel) => void;
   onAnnotationDelete?: (id: string) => void;
 
+  /**
+   * Used from visualizations like Table to add ad-hoc filters from cell values
+   */
+  onAddAdHocFilter?: (item: AdHocFilterItem) => void;
+
   /**
    * Enables modifying thresholds directly from the panel
    *

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

@@ -19,9 +19,9 @@ export interface TableRow {
 
 export const FILTER_FOR_OPERATOR = '=';
 export const FILTER_OUT_OPERATOR = '!=';
-export type FilterOperator = typeof FILTER_FOR_OPERATOR | typeof FILTER_OUT_OPERATOR;
-export type FilterItem = { key: string; value: string; operator: FilterOperator };
-export type TableFilterActionCallback = (item: FilterItem) => void;
+export type AdHocFilterOperator = typeof FILTER_FOR_OPERATOR | typeof FILTER_OUT_OPERATOR;
+export type AdHocFilterItem = { key: string; value: string; operator: AdHocFilterOperator };
+export type TableFilterActionCallback = (item: AdHocFilterItem) => void;
 export type TableColumnResizeActionCallback = (fieldDisplayName: string, width: number) => void;
 export type TableSortByActionCallback = (state: TableSortByFieldState[]) => void;
 

packages/grafana-ui/src/components/index.ts

@@ -80,7 +80,12 @@ export { PageToolbar } from './PageLayout/PageToolbar';
 export { SetInterval } from './SetInterval/SetInterval';
 
 export { Table } from './Table/Table';
-export { TableCellDisplayMode, type TableSortByFieldState, type TableFooterCalc } from './Table/types';
+export {
+  TableCellDisplayMode,
+  type TableSortByFieldState,
+  type TableFooterCalc,
+  type AdHocFilterItem,
+} from './Table/types';
 export { TableInputCSV } from './TableInputCSV/TableInputCSV';
 export { TabsBar } from './Tabs/TabsBar';
 export { Tab } from './Tabs/Tab';