diff --git a/packages/grafana-ui/src/components/Table/Table.test.tsx b/packages/grafana-ui/src/components/Table/Table.test.tsx new file mode 100644 index 00000000000..43947c9455f --- /dev/null +++ b/packages/grafana-ui/src/components/Table/Table.test.tsx @@ -0,0 +1,48 @@ +import React from 'react'; + +import { readCSV } from '../../utils/csv'; +import { Table, Props } from './Table'; +import { getTheme } from '../../themes/index'; +import { GrafanaThemeType } from '../../types/theme'; +import renderer from 'react-test-renderer'; + +const series = readCSV('a,b,c\n1,2,3\n4,5,6')[0]; +const setup = (propOverrides?: object) => { + const props: Props = { + data: series, + + minColumnWidth: 100, + showHeader: true, + fixedHeader: true, + fixedColumns: 0, + rotate: false, + styles: [], + replaceVariables: (value: string) => value, + width: 600, + height: 800, + + theme: getTheme(GrafanaThemeType.Dark), + }; // partial + + Object.assign(props, propOverrides); + + const tree = renderer.create(); + const instance = (tree.getInstance() as unknown) as Table; + + return { + tree, + instance, + }; +}; + +describe('Table', () => { + it('ignore invalid properties', () => { + const { tree, instance } = setup(); + expect(tree.toJSON() + '').toEqual( + setup({ + id: 3, // Don't pass invalid parameters to MultiGrid + }).tree.toJSON() + '' + ); + expect(instance.measurer.has(0, 0)).toBeTruthy(); + }); +}); diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx index 72b7d6392b9..71e96b486fd 100644 --- a/packages/grafana-ui/src/components/Table/Table.tsx +++ b/packages/grafana-ui/src/components/Table/Table.tsx @@ -282,14 +282,16 @@ export class Table extends Component { this.scrollToTop = false; } + // Force MultiGrid to rerender if these options change + // See: https://github.com/bvaughn/react-virtualized#pass-thru-props + const refreshKeys = { + ...this.state, // Includes data and sort parameters + d1: this.props.data, + s0: this.props.styles, + }; return ( { const { thresholds, colors } = this.style; diff --git a/packages/grafana-ui/src/components/Table/_Table.scss b/packages/grafana-ui/src/components/Table/_Table.scss index d9fb2dafe6c..bb82d021b4b 100644 --- a/packages/grafana-ui/src/components/Table/_Table.scss +++ b/packages/grafana-ui/src/components/Table/_Table.scss @@ -70,6 +70,7 @@ text-overflow: ellipsis; white-space: nowrap; + overflow: hidden; border-right: 2px solid $body-bg; border-bottom: 2px solid $body-bg;