FieldConfigs: String select type & cell display mode added to table panel (#22274)

* FieldConfigs: Added string select field config

* FieldConfigs: Added string select field config

* Changed to generic select type

packages/grafana-ui/src/components/FieldConfigs/select.tsx

+import React, { FC } from 'react';
+
+import { FieldOverrideContext, FieldOverrideEditorProps, FieldConfigEditorProps, SelectableValue } from '@grafana/data';
+import Forms from '../Forms';
+
+export interface SelectFieldConfigSettings<T> {
+  options: Array<SelectableValue<T>>;
+}
+
+export const selectOverrideProcessor = (
+  value: any,
+  context: FieldOverrideContext,
+  settings: SelectFieldConfigSettings<any>
+) => {
+  return value;
+};
+
+export const SelectValueEditor: FC<FieldConfigEditorProps<string, SelectFieldConfigSettings<any>>> = ({
+  item,
+  value,
+  onChange,
+}) => {
+  return <Forms.Select value={value || ''} onChange={e => onChange(e.value)} options={item.settings.options} />;
+};
+
+export const SelectOverrideEditor: FC<FieldOverrideEditorProps<string, SelectFieldConfigSettings<any>>> = ({
+  item,
+  value,
+  onChange,
+}) => {
+  return <Forms.Select value={value || ''} onChange={e => onChange(e.value)} options={item.settings.options} />;
+};

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

@@ -130,6 +130,12 @@ export {
   numberOverrideProcessor,
   NumberFieldConfigSettings,
 } from './FieldConfigs/number';
+export {
+  selectOverrideProcessor,
+  SelectValueEditor,
+  SelectOverrideEditor,
+  SelectFieldConfigSettings,
+} from './FieldConfigs/select';
 
 // Next-gen forms
 export { default as Forms } from './Forms';

public/app/plugins/panel/table2/custom.tsx

@@ -4,25 +4,51 @@ import {
   NumberOverrideEditor,
   numberOverrideProcessor,
   NumberFieldConfigSettings,
+  selectOverrideProcessor,
+  SelectValueEditor,
+  SelectOverrideEditor,
+  SelectFieldConfigSettings,
 } from '@grafana/ui';
 
-const columWidth: FieldPropertyEditorItem<number, NumberFieldConfigSettings> = {
-  id: 'width', // Match field properties
-  name: 'Column Width',
-  description: 'column width (for table)',
+export const tableFieldRegistry: FieldConfigEditorRegistry = new Registry<FieldPropertyEditorItem>(() => {
+  const columWidth: FieldPropertyEditorItem<number, NumberFieldConfigSettings> = {
+    id: 'width', // Match field properties
+    name: 'Column width',
+    description: 'column width (for table)',
 
-  editor: NumberValueEditor,
-  override: NumberOverrideEditor,
-  process: numberOverrideProcessor,
+    editor: NumberValueEditor,
+    override: NumberOverrideEditor,
+    process: numberOverrideProcessor,
 
-  settings: {
-    placeholder: 'auto',
-    min: 20,
-    max: 300,
-  },
-  shouldApply: () => true,
-};
+    settings: {
+      placeholder: 'auto',
+      min: 20,
+      max: 300,
+    },
 
-export const tableFieldRegistry: FieldConfigEditorRegistry = new Registry<FieldPropertyEditorItem>(() => {
-  return [columWidth];
+    shouldApply: () => true,
+  };
+
+  const cellDisplayMode: FieldPropertyEditorItem<string, SelectFieldConfigSettings<string>> = {
+    id: 'displayMode', // Match field properties
+    name: 'Cell display mode',
+    description: 'Color value, background, show as gauge, etc',
+
+    editor: SelectValueEditor,
+    override: SelectOverrideEditor,
+    process: selectOverrideProcessor,
+
+    settings: {
+      options: [
+        { value: 'auto', label: 'Auto' },
+        { value: 'color-background', label: 'Color background' },
+        { value: 'gradient-gauge', label: 'Gradient gauge' },
+        { value: 'lcd-gauge', label: 'LCD gauge' },
+      ],
+    },
+
+    shouldApply: () => true,
+  };
+
+  return [columWidth, cellDisplayMode];
 });