TableNG: Support custom cell renderer (#103560)

* chore: support custom cells

* chore: fix types

packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx

@@ -8,7 +8,13 @@ import { useStyles2 } from '../../../../themes';
 import { t } from '../../../../utils/i18n';
 import { IconButton } from '../../../IconButton/IconButton';
 import { TableCellInspectorMode } from '../../TableCellInspector';
-import { CellColors, FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR, TableCellNGProps } from '../types';
+import {
+  CellColors,
+  CustomCellRendererProps,
+  FILTER_FOR_OPERATOR,
+  FILTER_OUT_OPERATOR,
+  TableCellNGProps,
+} from '../types';
 import { getCellColors, getTextAlign } from '../utils';
 
 import { ActionsCell } from './ActionsCell';
@@ -125,6 +131,10 @@ export function TableCellNG(props: TableCellNGProps) {
     case TableCellDisplayMode.Actions:
       cell = <ActionsCell actions={actions} />;
       break;
+    case TableCellDisplayMode.Custom:
+      const CustomCellComponent: React.ComponentType<CustomCellRendererProps> = cellOptions.cellComponent;
+      cell = <CustomCellComponent field={field} value={value} rowIndex={rowIdx} frame={frame} />;
+      break;
     case TableCellDisplayMode.Auto:
     default:
       cell = (

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

@@ -81,6 +81,15 @@ export interface TableRow {
   [columnName: string]: TableCellValue;
 }
 
+export interface CustomCellRendererProps {
+  field: Field;
+  rowIndex: number;
+  frame: DataFrame;
+  // Would be great to have generic type for this but that would need having a generic DataFrame type where the field
+  // types could be propagated here.
+  value: unknown;
+}
+
 export interface CustomHeaderRendererProps {
   field: Field;
   defaultContent: React.ReactNode;