diff --git a/public/app/plugins/panel/table2/TablePanel.tsx b/public/app/plugins/panel/table2/TablePanel.tsx index cf9ddd83094..098a4bd72a1 100644 --- a/public/app/plugins/panel/table2/TablePanel.tsx +++ b/public/app/plugins/panel/table2/TablePanel.tsx @@ -13,7 +13,7 @@ import { SortedTableData } from './sortable'; interface Props extends PanelProps {} interface State { - sortBy?: number; // but really is a number! + sortBy?: number; sortDirection?: SortDirectionType; data: SortedTableData; } @@ -37,11 +37,8 @@ export class TablePanel extends Component { const { panelData, options } = this.props; const { sortBy, sortDirection } = this.state; - console.log('componentDidUpdate', this.props); - // Update the renderer if options change if (options !== prevProps.options) { - console.log('Options Changed, update renderer', options); this.renderer = new TableRenderer(options.styles, this.state.data, this._rowGetter, this.props.replaceVariables); } @@ -49,7 +46,6 @@ export class TablePanel extends Component { if (panelData !== prevProps.panelData || sortBy !== prevState.sortBy || sortDirection !== prevState.sortDirection) { const data = new SortedTableData(panelData.tableData, sortBy, sortDirection === 'DESC'); this.setState({ data }); - console.log('Data Changed, update', data); } } @@ -74,21 +70,13 @@ export class TablePanel extends Component { }; _headerRenderer = (header: TableHeaderProps): ReactNode => { - const dataKey = header.dataKey as any; // types say string, but it is number? + const dataKey = header.dataKey as any; // types say string, but it is number! const { data, sortBy, sortDirection } = this.state; - const col = data.getInfo()[dataKey]; - if (!col) { - return
??{dataKey}??
; - } - - const isSorted = sortBy === dataKey; - - console.log('header SORT', sortBy, isSorted); return (
- {col.text} {isSorted && } + {col.text} {sortBy === dataKey && }
); }; @@ -101,12 +89,12 @@ export class TablePanel extends Component { }; render() { - const { panelData, width, height, options } = this.props; + const { width, height, options } = this.props; const { showHeader } = options; // const { sortBy, sortDirection } = this.state; - const { tableData } = panelData; + const { data } = this.state; - if (!tableData || tableData.rows.length < 1) { + if (!data) { return
No Table Data...
; } @@ -122,18 +110,21 @@ export class TablePanel extends Component { overscanRowCount={10} rowHeight={30} rowGetter={this._rowGetter} - rowCount={tableData.rows.length} + rowCount={data.getCount()} sort={this._sort} width={width} > - {tableData.columns.map((col, index) => { + {data.getInfo().map((col, index) => { return ( ); })}