Review feedback, increased height

public/app/features/explore/Explore.tsx

@@ -645,7 +645,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
                 )}
                 )}
               {supportsTable && showingTable ? (
               {supportsTable && showingTable ? (
                 <div className="panel-container">
                 <div className="panel-container">
-                  <Table className="m-t-3" data={tableResult} loading={loading} onClickCell={this.onClickTableCell} />
+                  <Table data={tableResult} loading={loading} onClickCell={this.onClickTableCell} />
                 </div>
                 </div>
               ) : null}
               ) : null}
               {supportsLogs && showingLogs ? <Logs data={logsResult} loading={loading} /> : null}
               {supportsLogs && showingLogs ? <Logs data={logsResult} loading={loading} /> : null}

public/app/features/explore/Table.tsx

@@ -7,7 +7,6 @@ import TableModel from 'app/core/table_model';
 const EMPTY_TABLE = new TableModel();
 const EMPTY_TABLE = new TableModel();
 
 
 interface TableProps {
 interface TableProps {
-  className?: string;
   data: TableModel;
   data: TableModel;
   loading: boolean;
   loading: boolean;
   onClickCell?: (columnKey: string, rowValue: string) => void;
   onClickCell?: (columnKey: string, rowValue: string) => void;
@@ -17,7 +16,7 @@ function prepareRows(rows, columnNames) {
   return rows.map(cells => _.zipObject(columnNames, cells));
   return rows.map(cells => _.zipObject(columnNames, cells));
 }
 }
 
 
-export default class Table extends PureComponent<TableProps, {}> {
+export default class Table extends PureComponent<TableProps> {
   getCellProps = (state, rowInfo, column) => {
   getCellProps = (state, rowInfo, column) => {
     return {
     return {
       onClick: () => {
       onClick: () => {
@@ -38,6 +37,7 @@ export default class Table extends PureComponent<TableProps, {}> {
       show: text !== 'Time',
       show: text !== 'Time',
       Cell: row => <span className={filterable ? 'link' : ''}>{row.value}</span>,
       Cell: row => <span className={filterable ? 'link' : ''}>{row.value}</span>,
     }));
     }));
+    const noDataText = data ? 'The queries returned no data for a table.' : '';
 
 
     return (
     return (
       <ReactTable
       <ReactTable
@@ -46,8 +46,9 @@ export default class Table extends PureComponent<TableProps, {}> {
         getTdProps={this.getCellProps}
         getTdProps={this.getCellProps}
         loading={loading}
         loading={loading}
         minRows={0}
         minRows={0}
-        noDataText="No data returned from query."
+        noDataText={noDataText}
         resolveData={data => prepareRows(data, columnNames)}
         resolveData={data => prepareRows(data, columnNames)}
+        showPagination={data}
       />
       />
     );
     );
   }
   }

public/sass/_grafana.scss

-// vendor
+// DEPENDENCIES
+@import '../../node_modules/react-table/react-table.css';
+
+// VENDOR
 @import '../vendor/css/timepicker.css';
 @import '../vendor/css/timepicker.css';
 @import '../vendor/css/spectrum.css';
 @import '../vendor/css/spectrum.css';
 @import '../vendor/css/rc-cascader.scss';
 @import '../vendor/css/rc-cascader.scss';
-@import '../vendor/css/react-table.css';
 
 
 // MIXINS
 // MIXINS
 @import 'mixins/mixins';
 @import 'mixins/mixins';

public/sass/pages/_explore.scss

@@ -111,15 +111,6 @@
   .link {
   .link {
     text-decoration: underline;
     text-decoration: underline;
   }
   }
-
-  // React table
-  .explore-table-wrapper {
-    margin-top: 2 * $panel-margin;
-  }
-
-  .rt-tr .rt-td:last-child {
-    text-align: right;
-  }
 }
 }
 
 
 .explore + .explore {
 .explore + .explore {
@@ -201,6 +192,8 @@
 
 
 .ReactTable {
 .ReactTable {
   border: none;
   border: none;
+  // Allow some space for the no-data text
+  min-height: 120px;
 }
 }
 
 
 .ReactTable .rt-thead.-header {
 .ReactTable .rt-thead.-header {
@@ -247,3 +240,6 @@
 .ReactTable .-loading > div {
 .ReactTable .-loading > div {
   color: $input-color;
   color: $input-color;
 }
 }
+.ReactTable .rt-tr .rt-td:last-child {
+  text-align: right;
+}