ReactTable: adds possibility to resize columns (#23365)

* Refactor: adds one form of column resize to React-Table

* Refactor: resizing works

* Refactor: adds onColumnResize

* Refactor: fixes so sorting is not invoked when resizing

* Refactor: fixes styles for resizer

* Refactor: removes callback call

* Refactor: changes after comments

* Refactor: updates code according to new api

* Improved styling

* fix

* Refactor: adds back resizable panel option and defaults to false

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

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

@@ -1,9 +1,7 @@
-// Libraries
 import React, { Component } from 'react';
 
-// Types
 import { Table } from '@grafana/ui';
-import { PanelProps } from '@grafana/data';
+import { Field, FieldMatcherID, PanelProps } from '@grafana/data';
 import { Options } from './types';
 
 interface Props extends PanelProps<Options> {}
@@ -13,13 +11,39 @@ export class TablePanel extends Component<Props> {
     super(props);
   }
 
+  onColumnResize = (field: Field, width: number) => {
+    const current = this.props.fieldConfig;
+    const matcherId = FieldMatcherID.byName;
+    const prop = 'width';
+    const overrides = current.overrides.filter(
+      o => o.matcher.id !== matcherId || o.matcher.options !== field.name || o.properties[0].id !== prop
+    );
+
+    overrides.push({
+      matcher: { id: matcherId, options: field.name },
+      properties: [{ isCustom: true, id: prop, value: width }],
+    });
+
+    this.props.onFieldConfigChange({
+      ...current,
+      overrides,
+    });
+  };
+
   render() {
-    const { data, height, width, options } = this.props;
+    const {
+      data,
+      height,
+      width,
+      options: { showHeader, resizable },
+    } = this.props;
 
     if (data.series.length < 1) {
       return <div>No Table Data...</div>;
     }
 
-    return <Table height={height - 16} width={width} data={data.series[0]} noHeader={!options.showHeader} />;
+    return (
+      <Table height={height - 16} width={width} data={data.series[0]} noHeader={!showHeader} resizable={resizable} />
+    );
   }
 }

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

@@ -1,7 +1,5 @@
 //// Libraries
-import _ from 'lodash';
 import React, { PureComponent } from 'react';
-
 // Types
 import { PanelEditorProps } from '@grafana/data';
 import { LegacyForms } from '@grafana/ui';

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

@@ -52,4 +52,11 @@ export const plugin = new PanelPlugin<Options, CustomFieldConfig>(TablePanel)
       name: 'Show header',
       description: "To display table's header or not to display",
     });
+  })
+  .setPanelOptions(builder => {
+    builder.addBooleanSwitch({
+      path: 'resizable',
+      name: 'Resizable',
+      description: 'Toggles if table columns are resizable or not',
+    });
   });

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

@@ -1,5 +1,6 @@
 export interface Options {
   showHeader: boolean;
+  resizable: boolean;
 }
 
 export interface CustomFieldConfig {
@@ -9,4 +10,5 @@ export interface CustomFieldConfig {
 
 export const defaults: Options = {
   showHeader: true,
+  resizable: false,
 };