use TableData, not interface

packages/grafana-ui/src/types/data.ts

@@ -53,7 +53,7 @@ export interface TimeSeriesVMs {
   length: number;
 }
 
-interface Column {
+export interface Column {
   text: string;
   title?: string;
   type?: string;

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

@@ -3,19 +3,19 @@ import _ from 'lodash';
 import React, { Component, ReactNode } from 'react';
 
 // Types
-import { PanelProps, ThemeContext } from '@grafana/ui';
+import { PanelProps, ThemeContext, TableData } from '@grafana/ui';
 import { Options } from './types';
 import { Table, SortDirectionType, SortIndicator, Column, TableHeaderProps, TableCellProps } from 'react-virtualized';
 
 import { TableRenderer } from './renderer';
-import { SortedTableData } from './sortable';
+import { sortTableData } from './sortable';
 
 interface Props extends PanelProps<Options> {}
 
 interface State {
   sortBy?: number;
   sortDirection?: SortDirectionType;
-  data: SortedTableData;
+  data: TableData;
 }
 
 export class TablePanel extends Component<Props, State> {
@@ -27,10 +27,10 @@ export class TablePanel extends Component<Props, State> {
     const { panelData, options, replaceVariables } = this.props;
 
     this.state = {
-      data: new SortedTableData(panelData.tableData),
+      data: panelData.tableData,
     };
 
-    this.renderer = new TableRenderer(options.styles, this.state.data, this.rowGetter, replaceVariables);
+    this.renderer = new TableRenderer(options.styles, this.state.data.columns, this.rowGetter, replaceVariables);
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
@@ -39,18 +39,23 @@ export class TablePanel extends Component<Props, State> {
 
     // Update the renderer if options change
     if (options !== prevProps.options) {
-      this.renderer = new TableRenderer(options.styles, this.state.data, this.rowGetter, this.props.replaceVariables);
+      this.renderer = new TableRenderer(
+        options.styles,
+        this.state.data.columns,
+        this.rowGetter,
+        this.props.replaceVariables
+      );
     }
 
     // Update the data when data or sort changes
     if (panelData !== prevProps.panelData || sortBy !== prevState.sortBy || sortDirection !== prevState.sortDirection) {
-      const data = new SortedTableData(panelData.tableData, sortBy, sortDirection === 'DESC');
+      const data = sortTableData(panelData.tableData, sortBy, sortDirection === 'DESC');
       this.setState({ data });
     }
   }
 
   rowGetter = ({ index }) => {
-    return this.state.data.getRow(index);
+    return this.state.data.rows[index];
   };
 
   doSort = ({ sortBy }) => {
@@ -63,16 +68,13 @@ export class TablePanel extends Component<Props, State> {
       sortBy = null;
     }
 
-    // This will trigger sort via properties
-    console.log('SORT', sortBy, typeof sortBy, sortDirection);
-
     this.setState({ sortBy, sortDirection });
   };
 
   headerRenderer = (header: TableHeaderProps): ReactNode => {
     const dataKey = header.dataKey as any; // types say string, but it is number!
     const { data, sortBy, sortDirection } = this.state;
-    const col = data.getInfo()[dataKey];
+    const col = data.columns[dataKey];
 
     return (
       <div>
@@ -83,7 +85,7 @@ export class TablePanel extends Component<Props, State> {
 
   cellRenderer = (cell: TableCellProps) => {
     const { columnIndex, rowIndex } = cell;
-    const row = this.state.data.getRow(rowIndex);
+    const row = this.state.data.rows[rowIndex];
     const val = row[columnIndex];
     return this.renderer.renderCell(columnIndex, rowIndex, val);
   };
@@ -110,11 +112,11 @@ export class TablePanel extends Component<Props, State> {
             overscanRowCount={10}
             rowHeight={30}
             rowGetter={this.rowGetter}
-            rowCount={data.getCount()}
+            rowCount={data.rows.length}
             sort={this.doSort}
             width={width}
           >
-            {data.getInfo().map((col, index) => {
+            {data.columns.map((col, index) => {
               return (
                 <Column
                   key={index}

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

@@ -7,9 +7,8 @@ import { sanitize } from 'app/core/utils/text';
 
 // Types
 import kbn from 'app/core/utils/kbn';
-import { getValueFormat, getColorFromHexRgbOrName, GrafanaThemeType, InterpolateFunction } from '@grafana/ui';
+import { getValueFormat, getColorFromHexRgbOrName, GrafanaThemeType, InterpolateFunction, Column } from '@grafana/ui';
 import { Style } from './types';
-import { SortedTableData } from './sortable';
 import { Index } from 'react-virtualized';
 
 type CellFormatter = (v: any, style: Style) => string;
@@ -32,18 +31,18 @@ export class TableRenderer {
 
   constructor(
     styles: Style[],
-    data: SortedTableData,
+    schema: Column[],
     private rowGetter: (info: Index) => any[], // matches the table rowGetter
     private replaceVariables: InterpolateFunction
   ) {
     this.colorState = {};
 
-    if (!data) {
+    if (!schema) {
       this.columns = [];
       return;
     }
 
-    this.columns = data.getInfo().map((col, index) => {
+    this.columns = schema.map((col, index) => {
       let title = col.text;
       let style: Style = null;
 

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

 // Libraries
-import _ from 'lodash';
+import isNumber from 'lodash/isNumber';
 
 import { TableData } from '@grafana/ui';
 
-export class SortedTableData {
-  rows: any[];
-
-  constructor(private data: TableData, sortIndex?: number, reverse?: boolean) {
-    if (_.isNumber(sortIndex)) {
-      // Make a copy of all the rows
-      this.rows = this.data.rows.map((row, index) => {
+export function sortTableData(data: TableData, sortIndex?: number, reverse = false): TableData {
+  if (isNumber(sortIndex)) {
+    const copy = {
+      ...data,
+      rows: data.rows.map((row, index) => {
         return row;
-      });
-      this.rows.sort((a, b) => {
-        a = a[sortIndex];
-        b = b[sortIndex];
-        // Sort null or undefined separately from comparable values
-        return +(a == null) - +(b == null) || +(a > b) || -(a < b);
-      });
+      }),
+    };
 
-      if (reverse) {
-        this.rows.reverse();
-      }
-    } else {
-      this.rows = data.rows;
-    }
-  }
+    copy.rows.sort((a, b) => {
+      a = a[sortIndex];
+      b = b[sortIndex];
+      // Sort null or undefined separately from comparable values
+      return +(a == null) - +(b == null) || +(a > b) || -(a < b);
+    });
 
-  getInfo(): any[] {
-    return this.data.columns;
-  }
-
-  getRow(index: number): any[] {
-    return this.rows[index];
-  }
+    if (reverse) {
+      copy.rows.reverse();
+    }
 
-  getCount(): number {
-    return this.rows.length;
+    return copy;
   }
+  return data;
 }

public/app/plugins/panel/table2/specs/renderer.test.ts

@@ -6,7 +6,6 @@ import { Options } from '../types';
 import { PanelProps, LoadingState } from '@grafana/ui/src/types';
 import moment from 'moment';
 import { TableRenderer } from '../renderer';
-import { SortedTableData } from '../sortable';
 
 // TODO: this is commented out with *x* describe!
 // Essentially all the elements need to replace the <td> with <div>
@@ -204,9 +203,8 @@ xdescribe('when rendering table', () => {
       renderCounter: 1,
       options: panel,
     };
-    const data = new SortedTableData(table);
-    const rowGetter = ({ index }) => data.getRow(index);
-    const renderer = new TableRenderer(panel.styles, data, rowGetter, props.replaceVariables);
+    const rowGetter = ({ index }) => table.rows[index];
+    const renderer = new TableRenderer(panel.styles, table.columns, rowGetter, props.replaceVariables);
     renderer.setTheme(null);
 
     it('time column should be formated', () => {