TablePanel: Adding sort order persistance (#24705)

* TablePanel: Adding sort order persistance

* adds panel test dashboard for table panel

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

@@ -1,17 +1,11 @@
 import React, { Component } from 'react';
 
 import { Table, Select } from '@grafana/ui';
-import {
-  FieldMatcherID,
-  PanelProps,
-  DataFrame,
-  SelectableValue,
-  getFrameDisplayName,
-  getFieldDisplayName,
-} from '@grafana/data';
+import { FieldMatcherID, PanelProps, DataFrame, SelectableValue, getFrameDisplayName } from '@grafana/data';
 import { Options } from './types';
 import { css } from 'emotion';
 import { config } from 'app/core/config';
+import { TableSortByFieldState } from '@grafana/ui/src/components/Table/types';
 
 interface Props extends PanelProps<Options> {}
 
@@ -20,21 +14,10 @@ export class TablePanel extends Component<Props> {
     super(props);
   }
 
-  onColumnResize = (fieldIndex: number, width: number) => {
-    const { fieldConfig, data } = this.props;
+  onColumnResize = (fieldDisplayName: string, width: number) => {
+    const { fieldConfig } = this.props;
     const { overrides } = fieldConfig;
-    const frame = data.series[this.getCurrentFrameIndex()];
 
-    if (!frame) {
-      return;
-    }
-
-    const field = frame.fields[fieldIndex];
-    if (!field) {
-      return;
-    }
-
-    const fieldDisplayName = getFieldDisplayName(field, frame, data.series);
     const matcherId = FieldMatcherID.byName;
     const propId = 'custom.width';
 
@@ -62,6 +45,13 @@ export class TablePanel extends Component<Props> {
     });
   };
 
+  onSortByChange = (sortBy: TableSortByFieldState[]) => {
+    this.props.onOptionsChange({
+      ...this.props.options,
+      sortBy,
+    });
+  };
+
   onChangeTableSelection = (val: SelectableValue<number>) => {
     this.props.onOptionsChange({
       ...this.props.options,
@@ -82,6 +72,8 @@ export class TablePanel extends Component<Props> {
         data={frame}
         noHeader={!options.showHeader}
         resizable={true}
+        initialSortBy={options.sortBy}
+        onSortByChange={this.onSortByChange}
         onColumnResize={this.onColumnResize}
       />
     );

public/app/plugins/panel/table/types.ts

@@ -1,6 +1,14 @@
+import { TableSortByFieldState } from '@grafana/ui';
+
 export interface Options {
   frameIndex: number;
   showHeader: boolean;
+  sortBy?: TableSortByFieldState[];
+}
+
+export interface TableSortBy {
+  displayName: string;
+  desc: boolean;
 }
 
 export interface CustomFieldConfig {