Table: Reorder panel options (#49983)

* Table: Reorder panel options

* Fix e2e selector

e2e/panels-suite/panelEdit_base.spec.ts

@@ -102,7 +102,7 @@ e2e.scenario({
     e2e.components.PanelEditor.DataPane.content().should('be.visible');
 
     // Field & Overrides tabs (need to switch to React based vis, i.e. Table)
-    e2e.components.PanelEditor.OptionsPane.fieldLabel('Header and footer Show header').should('be.visible');
+    e2e.components.PanelEditor.OptionsPane.fieldLabel('Table Show table header').should('be.visible');
     e2e.components.PanelEditor.OptionsPane.fieldLabel('Table Column width').should('be.visible');
   },
 });

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

@@ -15,6 +15,8 @@ import { tableMigrationHandler, tablePanelChangedHandler } from './migrations';
 import { PanelOptions, defaultPanelOptions, defaultPanelFieldConfig } from './models.gen';
 import { TableSuggestionsSupplier } from './suggestions';
 
+const footerCategory = 'Table footer';
+
 export const plugin = new PanelPlugin<PanelOptions, TableFieldOptions>(TablePanel)
   .setPanelChangeHandler(tablePanelChangedHandler)
   .setMigrationHandler(tableMigrationHandler)
@@ -110,21 +112,18 @@ export const plugin = new PanelPlugin<PanelOptions, TableFieldOptions>(TablePane
     builder
       .addBooleanSwitch({
         path: 'showHeader',
-        category: ['Header and footer'],
-        name: 'Show header',
-        description: "To display table's header or not to display",
+        name: 'Show table header',
         defaultValue: defaultPanelOptions.showHeader,
       })
       .addBooleanSwitch({
         path: 'footer.show',
-        category: ['Header and footer'],
-        name: 'Show Footer',
-        description: "To display table's footer or not to display",
+        category: [footerCategory],
+        name: 'Show table footer',
         defaultValue: defaultPanelOptions.footer?.show,
       })
       .addCustomEditor({
         id: 'footer.reducer',
-        category: ['Header and footer'],
+        category: [footerCategory],
         path: 'footer.reducer',
         name: 'Calculation',
         description: 'Choose a reducer function / calculation',
@@ -134,7 +133,7 @@ export const plugin = new PanelPlugin<PanelOptions, TableFieldOptions>(TablePane
       })
       .addMultiSelect({
         path: 'footer.fields',
-        category: ['Header and footer'],
+        category: [footerCategory],
         name: 'Fields',
         description: 'Select the fields that should be calculated',
         settings: {
@@ -161,7 +160,6 @@ export const plugin = new PanelPlugin<PanelOptions, TableFieldOptions>(TablePane
       })
       .addCustomEditor({
         id: 'footer.enablePagination',
-        category: ['Header and footer'],
         path: 'footer.enablePagination',
         name: 'Enable pagination',
         editor: PaginationEditor,