Table: various minor fixes (alpha panel) (#17258)

packages/grafana-ui/src/components/Table/Table.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { readCSV } from '../../utils/csv';
+import { Table, Props } from './Table';
+import { getTheme } from '../../themes/index';
+import { GrafanaThemeType } from '../../types/theme';
+import renderer from 'react-test-renderer';
+
+const series = readCSV('a,b,c\n1,2,3\n4,5,6')[0];
+const setup = (propOverrides?: object) => {
+  const props: Props = {
+    data: series,
+
+    minColumnWidth: 100,
+    showHeader: true,
+    fixedHeader: true,
+    fixedColumns: 0,
+    rotate: false,
+    styles: [],
+    replaceVariables: (value: string) => value,
+    width: 600,
+    height: 800,
+
+    theme: getTheme(GrafanaThemeType.Dark),
+  }; // partial
+
+  Object.assign(props, propOverrides);
+
+  const tree = renderer.create(<Table {...props} />);
+  const instance = (tree.getInstance() as unknown) as Table;
+
+  return {
+    tree,
+    instance,
+  };
+};
+
+describe('Table', () => {
+  it('ignore invalid properties', () => {
+    const { tree, instance } = setup();
+    expect(tree.toJSON() + '').toEqual(
+      setup({
+        id: 3, // Don't pass invalid parameters to MultiGrid
+      }).tree.toJSON() + ''
+    );
+    expect(instance.measurer.has(0, 0)).toBeTruthy();
+  });
+});

packages/grafana-ui/src/components/Table/Table.tsx

@@ -282,14 +282,16 @@ export class Table extends Component<Props, State> {
       this.scrollToTop = false;
     }
 
+    // Force MultiGrid to rerender if these options change
+    // See: https://github.com/bvaughn/react-virtualized#pass-thru-props
+    const refreshKeys = {
+      ...this.state, // Includes data and sort parameters
+      d1: this.props.data,
+      s0: this.props.styles,
+    };
     return (
       <MultiGrid
-        {
-          ...this.state /** Force MultiGrid to update when data changes */
-        }
-        {
-          ...this.props /** Force MultiGrid to update when data changes */
-        }
+        {...refreshKeys}
         scrollToRow={scrollToRow}
         columnCount={columnCount}
         scrollToColumn={scrollToColumn}

packages/grafana-ui/src/components/Table/TableCellBuilder.tsx

@@ -157,10 +157,7 @@ class CellBuilderWithStyle {
     private column: Field,
     private replaceVariables: InterpolateFunction,
     private fmt?: ValueFormatter
-  ) {
-    //
-    console.log('COLUMN', column.name, theme);
-  }
+  ) {}
 
   getColorForValue = (value: any): string | null => {
     const { thresholds, colors } = this.style;

packages/grafana-ui/src/components/Table/_Table.scss

@@ -70,6 +70,7 @@
 
   text-overflow: ellipsis;
   white-space: nowrap;
+  overflow: hidden;
 
   border-right: 2px solid $body-bg;
   border-bottom: 2px solid $body-bg;