table using MultiGrid

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

-import React, { FunctionComponent } from 'react';
+// import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { storiesOf } from '@storybook/react';
 import { Table } from './Table';
 import { Table } from './Table';
 
 
 import { migratedTestTable, migratedTestStyles, simpleTable } from './examples';
 import { migratedTestTable, migratedTestStyles, simpleTable } from './examples';
-import { ScopedVars } from '../../types/index';
-
-import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
-import { AutoSizer } from 'react-virtualized';
-
-const CenteredStory: FunctionComponent<{}> = ({ children }) => {
-  return (
-    <div
-      style={{
-        width: '100%',
-        height: '100vh',
-      }}
-    >
-      <AutoSizer>
-        {({ width, height }) => (
-          <div
-            style={{
-              width: `${width}px`,
-              height: `${height}px`,
-              border: '1px solid red',
-            }}
-          >
-            <div>
-              Need to pass {width}/{height} to the table?
-            </div>
-            {children}
-          </div>
-        )}
-      </AutoSizer>
-    </div>
-  );
-};
+import { ScopedVars, TableData } from '../../types/index';
+import { withFullSizeStory } from '../../utils/storybook/withFullSizeStory';
 
 
 const replaceVariables = (value: any, scopedVars: ScopedVars | undefined) => {
 const replaceVariables = (value: any, scopedVars: ScopedVars | undefined) => {
   // if (scopedVars) {
   // if (scopedVars) {
@@ -47,24 +17,49 @@ const replaceVariables = (value: any, scopedVars: ScopedVars | undefined) => {
 };
 };
 
 
 storiesOf('UI - Alpha/Table', module)
 storiesOf('UI - Alpha/Table', module)
-  .addDecorator(story => <CenteredStory>{story()}</CenteredStory>)
   .add('basic', () => {
   .add('basic', () => {
-    return renderComponentWithTheme(Table, {
+    return withFullSizeStory(Table, {
       styles: [],
       styles: [],
       data: simpleTable,
       data: simpleTable,
       replaceVariables,
       replaceVariables,
       showHeader: true,
       showHeader: true,
-      width: 500,
-      height: 300,
     });
     });
   })
   })
   .add('Test Configuration', () => {
   .add('Test Configuration', () => {
-    return renderComponentWithTheme(Table, {
+    return withFullSizeStory(Table, {
       styles: migratedTestStyles,
       styles: migratedTestStyles,
       data: migratedTestTable,
       data: migratedTestTable,
       replaceVariables,
       replaceVariables,
       showHeader: true,
       showHeader: true,
-      width: 500,
-      height: 300,
+    });
+  })
+  .add('Lots of cells', () => {
+    const data = {
+      columns: [],
+      rows: [],
+      type: 'table',
+      columnMap: {},
+    } as TableData;
+    for (let i = 0; i < 20; i++) {
+      data.columns.push({
+        text: 'Column ' + i,
+      });
+    }
+    for (let r = 0; r < 500; r++) {
+      const row = [];
+      for (let i = 0; i < 20; i++) {
+        row.push(r + i);
+      }
+      data.rows.push(row);
+    }
+    console.log('DATA:', data);
+
+    return withFullSizeStory(Table, {
+      styles: simpleTable,
+      data,
+      replaceVariables,
+      showHeader: true,
+      fixedColumnCount: 1,
+      fixedRowCount: 1,
     });
     });
   });
   });

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

@@ -3,9 +3,9 @@ import _ from 'lodash';
 import { getColorDefinitionByName } from '@grafana/ui';
 import { getColorDefinitionByName } from '@grafana/ui';
 import { ScopedVars } from '@grafana/ui/src/types';
 import { ScopedVars } from '@grafana/ui/src/types';
 import { getTheme } from '../../themes';
 import { getTheme } from '../../themes';
-import Table from './Table';
 
 
 import { migratedTestTable, migratedTestStyles } from './examples';
 import { migratedTestTable, migratedTestStyles } from './examples';
+import TableXXXX from './TableXXXX';
 
 
 // TODO: this is commented out with *x* describe!
 // TODO: this is commented out with *x* describe!
 // Essentially all the elements need to replace the <td> with <div>
 // Essentially all the elements need to replace the <td> with <div>
@@ -28,7 +28,7 @@ xdescribe('when rendering table', () => {
     };
     };
 
 
     const table = migratedTestTable;
     const table = migratedTestTable;
-    const renderer = new Table({
+    const renderer = new TableXXXX({
       styles: migratedTestStyles,
       styles: migratedTestStyles,
       data: migratedTestTable,
       data: migratedTestTable,
       replaceVariables,
       replaceVariables,

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

@@ -9,12 +9,6 @@
   display: flex;
   display: flex;
   flex-direction: row;
   flex-direction: row;
   align-items: left;
   align-items: left;
-
-  background: $list-item-bg;
-  border-top: 2px solid $body-bg;
-  border-bottom: 2px solid $body-bg;
-
-  color: $blue;
 }
 }
 .ReactVirtualized__Table__row {
 .ReactVirtualized__Table__row {
   display: flex;
   display: flex;
@@ -37,12 +31,6 @@
   margin-right: 10px;
   margin-right: 10px;
   min-width: 0px;
   min-width: 0px;
 }
 }
-.ReactVirtualized__Table__rowColumn {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  border-right: 2px solid $body-bg;
-}
 
 
 .ReactVirtualized__Table__headerColumn:first-of-type,
 .ReactVirtualized__Table__headerColumn:first-of-type,
 .ReactVirtualized__Table__rowColumn:first-of-type {
 .ReactVirtualized__Table__rowColumn:first-of-type {
@@ -62,3 +50,25 @@
   width: 1em;
   width: 1em;
   fill: currentColor;
   fill: currentColor;
 }
 }
+
+.gf-table-header {
+  padding: 3px 10px;
+
+  background: $list-item-bg;
+  border-top: 2px solid $body-bg;
+  border-bottom: 2px solid $body-bg;
+
+  cursor: pointer;
+
+  color: $blue;
+}
+
+.gf-table-cell {
+  padding: 3px 10px;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  border-right: 2px solid $body-bg;
+  border-bottom: 2px solid $body-bg;
+}

packages/grafana-ui/src/utils/storybook/withFullSizeStory.tsx

+import React from 'react';
+import { AutoSizer } from 'react-virtualized';
+
+export const withFullSizeStory = (component: React.ComponentType<any>, props: any) => (
+  <div
+    style={{
+      height: '100vh',
+      width: '100%',
+    }}
+  >
+    <AutoSizer>
+      {({ width, height }) => (
+        <>
+          {React.createElement(component, {
+            ...props,
+            width,
+            height,
+          })}
+        </>
+      )}
+    </AutoSizer>
+  </div>
+);