diff --git a/packages/grafana-ui/src/components/Table/Table.story.tsx b/packages/grafana-ui/src/components/Table/Table.story.tsx index 71206af2b0a..1fea903adbd 100644 --- a/packages/grafana-ui/src/components/Table/Table.story.tsx +++ b/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, diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx index d2a65bdf9b0..3d759ec1ae5 100644 --- a/packages/grafana-ui/src/components/Table/Table.tsx +++ b/packages/grafana-ui/src/components/Table/Table.tsx @@ -61,6 +61,7 @@ export class Table extends Component { renderer: ColumnRenderInfo[]; measurer: CellMeasurerCache; scrollToTop = false; + rotateWidth = 100; static defaultProps = { showHeader: true, @@ -85,7 +86,7 @@ export class Table extends Component { } 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 { 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 { /** 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 { }; 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 Missing Fields; // nothing + } let columnCount = data.fields.length; let rowCount = data.rows.length + (showHeader ? 1 : 0); diff --git a/packages/grafana-ui/src/components/Table/examples.ts b/packages/grafana-ui/src/components/Table/examples.ts index 15b430d8920..efeac94969d 100644 --- a/packages/grafana-ui/src/components/Table/examples.ts +++ b/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]], };