Table: React table fix rotate support in storybook (#16816)

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

@@ -43,7 +43,7 @@ export function makeDummyTable(columnCount: number, rowCount: number): SeriesDat
   };
 }
 
-storiesOf('Alpha/Table', module)
+storiesOf('UI/Table', module)
   .add('Basic Table', () => {
     // NOTE: This example does not seem to survice rotate &
     // Changing fixed headers... but the next one does?
@@ -56,7 +56,7 @@ storiesOf('Alpha/Table', module)
 
     return withFullSizeStory(Table, {
       styles: [],
-      data: simpleTable,
+      data: { ...simpleTable },
       replaceVariables,
       showHeader,
       fixedHeader,

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

@@ -61,6 +61,7 @@ export class Table extends Component<Props, State> {
   renderer: ColumnRenderInfo[];
   measurer: CellMeasurerCache;
   scrollToTop = false;
+  rotateWidth = 100;
 
   static defaultProps = {
     showHeader: true,
@@ -85,7 +86,7 @@ export class Table extends Component<Props, State> {
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
-    const { data, styles, showHeader } = this.props;
+    const { data, styles, showHeader, rotate } = this.props;
     const { sortBy, sortDirection } = this.state;
     const dataChanged = data !== prevProps.data;
     const configsChanged =
@@ -105,6 +106,11 @@ export class Table extends Component<Props, State> {
       this.renderer = this.initColumns(this.props);
     }
 
+    if (dataChanged || rotate !== prevProps.rotate) {
+      const { width, minColumnWidth } = this.props;
+      this.rotateWidth = Math.max(width / data.rows.length, minColumnWidth);
+    }
+
     // Update the data when data or sort changes
     if (dataChanged || sortBy !== prevState.sortBy || sortDirection !== prevState.sortDirection) {
       this.scrollToTop = true;
@@ -115,6 +121,10 @@ export class Table extends Component<Props, State> {
   /** Given the configuration, setup how each column gets rendered */
   initColumns(props: Props): ColumnRenderInfo[] {
     const { styles, data, width, minColumnWidth } = props;
+    if (!data || !data.fields || !data.fields.length || !styles) {
+      return [];
+    }
+
     const columnWidth = Math.max(width / data.fields.length, minColumnWidth);
 
     return data.fields.map((col, index) => {
@@ -235,12 +245,18 @@ export class Table extends Component<Props, State> {
   };
 
   getColumnWidth = (col: Index): number => {
+    if (this.props.rotate) {
+      return this.rotateWidth; // fixed for now
+    }
     return this.renderer[col.index].width;
   };
 
   render() {
     const { showHeader, fixedHeader, fixedColumns, rotate, width, height } = this.props;
     const { data } = this.state;
+    if (!data || !data.fields || !data.fields.length) {
+      return <span>Missing Fields</span>; // nothing
+    }
 
     let columnCount = data.fields.length;
     let rowCount = data.rows.length + (showHeader ? 1 : 0);

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

@@ -162,6 +162,6 @@ export const migratedTestStyles: ColumnStyle[] = [
 
 export const simpleTable = {
   type: 'table',
-  columns: [{ name: 'First' }, { name: 'Second' }, { name: 'Third' }],
+  fields: [{ name: 'First' }, { name: 'Second' }, { name: 'Third' }],
   rows: [[701, 205, 305], [702, 206, 301], [703, 207, 304]],
 };