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

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)',
-
-  editor: NumberValueEditor,
-  override: NumberOverrideEditor,
-  process: numberOverrideProcessor,
-
-  settings: {
-    placeholder: 'auto',
-    min: 20,
-    max: 300,
-  },
-  shouldApply: () => true,
-};
-
 export const tableFieldRegistry: FieldConfigEditorRegistry = new Registry<FieldPropertyEditorItem>(() => {
-  return [columWidth];
+  const columWidth: FieldPropertyEditorItem<number, NumberFieldConfigSettings> = {
+    id: 'width', // Match field properties
+    name: 'Column width',
+    description: 'column width (for table)',
+
+    editor: NumberValueEditor,
+    override: NumberOverrideEditor,
+    process: numberOverrideProcessor,
+
+    settings: {
+      placeholder: 'auto',
+      min: 20,
+      max: 300,
+    },
+
+    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];
 });