TablePanel: Fixed persisting column resize time series fields (#24505)

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

 import React, { Component } from 'react';
 import React, { Component } from 'react';
 
 
 import { Table, Select } from '@grafana/ui';
 import { Table, Select } from '@grafana/ui';
-import { FieldMatcherID, PanelProps, DataFrame, SelectableValue, getFrameDisplayTitle } from '@grafana/data';
+import {
+  FieldMatcherID,
+  PanelProps,
+  DataFrame,
+  SelectableValue,
+  getFrameDisplayTitle,
+  getFieldTitle,
+} from '@grafana/data';
 import { Options } from './types';
 import { Options } from './types';
 import { css } from 'emotion';
 import { css } from 'emotion';
 import { config } from 'app/core/config';
 import { config } from 'app/core/config';
@@ -27,12 +34,12 @@ export class TablePanel extends Component<Props> {
       return;
       return;
     }
     }
 
 
-    const fieldName = field.name;
+    const fieldDisplayName = getFieldTitle(field, frame, data.series);
     const matcherId = FieldMatcherID.byName;
     const matcherId = FieldMatcherID.byName;
     const propId = 'custom.width';
     const propId = 'custom.width';
 
 
     // look for existing override
     // look for existing override
-    const override = overrides.find(o => o.matcher.id === matcherId && o.matcher.options === fieldName);
+    const override = overrides.find(o => o.matcher.id === matcherId && o.matcher.options === fieldDisplayName);
 
 
     if (override) {
     if (override) {
       // look for existing property
       // look for existing property
@@ -44,7 +51,7 @@ export class TablePanel extends Component<Props> {
       }
       }
     } else {
     } else {
       overrides.push({
       overrides.push({
-        matcher: { id: matcherId, options: fieldName },
+        matcher: { id: matcherId, options: fieldDisplayName },
         properties: [{ id: propId, value: width }],
         properties: [{ id: propId, value: width }],
       });
       });
     }
     }