diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx index b3facd3f66a..e6ee4dc1f0a 100644 --- a/packages/grafana-ui/src/components/Table/Table.tsx +++ b/packages/grafana-ui/src/components/Table/Table.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import React, { FC, memo, useMemo } from 'react'; import { DataFrame, Field } from '@grafana/data'; import { useSortBy, useTable, useBlockLayout, Cell } from 'react-table'; import { FixedSizeList } from 'react-window'; @@ -10,22 +10,25 @@ import { getTableStyles } from './styles'; import { TableCell } from './TableCell'; import { Icon } from '../Icon/Icon'; import { getTextAlign } from './utils'; +import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar'; export interface Props { data: DataFrame; width: number; height: number; + /** Minimal column width specified in pixels */ + columnMinWidth?: number; onCellClick?: TableFilterActionCallback; } -export const Table = ({ data, height, onCellClick, width }: Props) => { +export const Table: FC = memo(({ data, height, onCellClick, width, columnMinWidth }) => { const theme = useTheme(); const [ref, headerRowMeasurements] = useMeasure(); const tableStyles = getTableStyles(theme); const { getTableProps, headerGroups, rows, prepareRow } = useTable( { - columns: useMemo(() => getColumns(data, width), [data]), + columns: useMemo(() => getColumns(data, width, columnMinWidth ?? 150), [data, width, columnMinWidth]), data: useMemo(() => getTableRows(data), [data]), }, useSortBy, @@ -53,28 +56,39 @@ export const Table = ({ data, height, onCellClick, width }: Props) => { [prepareRow, rows] ); + let totalWidth = 0; + + for (const headerGroup of headerGroups) { + for (const header of headerGroup.headers) { + totalWidth += header.width as number; + } + } + return (
-
- {headerGroups.map((headerGroup: any) => ( -
- {headerGroup.headers.map((column: any) => - renderHeaderCell(column, tableStyles.headerCell, data.fields[column.index]) - )} -
- ))} -
- - {RenderRow} - + +
+ {headerGroups.map((headerGroup: any) => ( +
+ {headerGroup.headers.map((column: any) => + renderHeaderCell(column, tableStyles.headerCell, data.fields[column.index]) + )} +
+ ))} +
+ + {RenderRow} + +
); -}; +}); function renderHeaderCell(column: any, className: string, field: Field) { const headerProps = column.getHeaderProps(column.getSortByToggleProps()); diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts index 9b4056a53f8..25c7587a67b 100644 --- a/packages/grafana-ui/src/components/Table/styles.ts +++ b/packages/grafana-ui/src/components/Table/styles.ts @@ -31,8 +31,10 @@ export const getTableStyles = stylesFactory( cellHeightInner: bodyFontSize * lineHeight, rowHeight: cellHeight + 2, table: css` + height: 100%; + width: 100%; overflow: auto; - border-spacing: 0; + display: flex; `, thead: css` label: thead; diff --git a/packages/grafana-ui/src/components/Table/utils.test.ts b/packages/grafana-ui/src/components/Table/utils.test.ts index e29d9566813..d92ccef81a7 100644 --- a/packages/grafana-ui/src/components/Table/utils.test.ts +++ b/packages/grafana-ui/src/components/Table/utils.test.ts @@ -40,12 +40,13 @@ describe('Table utils', () => { }); it('Should distribute width and use field config width', () => { - const columns = getColumns(getData(), 1000); + const columns = getColumns(getData(), 1000, 120); expect(columns[0].width).toBe(450); expect(columns[1].width).toBe(100); }); }); + describe('getTextAlign', () => { it('Should use textAlign from custom', () => { const data = getData(); diff --git a/packages/grafana-ui/src/components/Table/utils.ts b/packages/grafana-ui/src/components/Table/utils.ts index b8aa15d3dc4..ba2cb0cee3b 100644 --- a/packages/grafana-ui/src/components/Table/utils.ts +++ b/packages/grafana-ui/src/components/Table/utils.ts @@ -42,7 +42,7 @@ export function getTextAlign(field: Field): TextAlignProperty { return 'left'; } -export function getColumns(data: DataFrame, availableWidth: number): Column[] { +export function getColumns(data: DataFrame, availableWidth: number, columnMinWidth: number): Column[] { const columns: Column[] = []; let fieldCountWithoutWidth = data.fields.length; @@ -67,7 +67,7 @@ export function getColumns(data: DataFrame, availableWidth: number): Column[] { const sharedWidth = availableWidth / fieldCountWithoutWidth; for (const column of columns) { if (!column.width) { - column.width = sharedWidth; + column.width = Math.max(sharedWidth, columnMinWidth); } } diff --git a/public/app/features/dashboard/components/Inspector/PanelInspector.tsx b/public/app/features/dashboard/components/Inspector/PanelInspector.tsx index 3d20816f0d7..40866f9dfa4 100644 --- a/public/app/features/dashboard/components/Inspector/PanelInspector.tsx +++ b/public/app/features/dashboard/components/Inspector/PanelInspector.tsx @@ -219,6 +219,7 @@ export class PanelInspector extends PureComponent { if (width === 0) { return null; } + return (