diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx index 3e3138e55ef..1a1c3bbca5a 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx @@ -159,6 +159,7 @@ export function TableCellNG(props: TableCellNGProps) { tableCellDiv?.style.setProperty('min-height', `100%`); tableCellDiv?.style.setProperty('height', `fit-content`); tableCellDiv?.style.setProperty('background', colors.bgHoverColor || 'none'); + tableCellDiv?.style.setProperty('min-width', 'min-content'); } }; @@ -173,6 +174,7 @@ export function TableCellNG(props: TableCellNGProps) { tableCellDiv?.style.removeProperty('min-height'); tableCellDiv?.style.removeProperty('height'); tableCellDiv?.style.removeProperty('background'); + tableCellDiv?.style.removeProperty('min-width'); } }; diff --git a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx index 446c5023645..01934d0da2e 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx @@ -865,28 +865,26 @@ export function mapFrameToDataGrid({ }); }); - // INFO: This loop calculates the width for each column in less than a millisecond. + // set columns that are at minimum width let sharedWidth = availableWidth / fieldCountWithoutWidth; - - // First pass: Assign minimum widths to columns that need it - columns.forEach((column) => { - if (!column.width && column.minWidth! > sharedWidth) { - column.width = column.minWidth; - availableWidth -= column.width!; - fieldCountWithoutWidth -= 1; + for (let i = fieldCountWithoutWidth; i > 0; i--) { + for (const column of columns) { + if (!column.width && column.minWidth! > sharedWidth) { + column.width = column.minWidth; + availableWidth -= column.width!; + fieldCountWithoutWidth -= 1; + sharedWidth = availableWidth / fieldCountWithoutWidth; + } } - }); + } - // Recalculate shared width after assigning minimum widths - sharedWidth = availableWidth / fieldCountWithoutWidth; - - // Second pass: Assign shared width to remaining columns - columns.forEach((column) => { + // divide up the rest of the space + for (const column of columns) { if (!column.width) { column.width = sharedWidth; } - column.minWidth = COLUMN.MIN_WIDTH; // Ensure min-width is always set - }); + column.minWidth = COLUMN.MIN_WIDTH; + } return columns; } @@ -980,6 +978,8 @@ const getStyles = (theme: GrafanaTheme2) => ({ '--rdg-summary-border-color': theme.colors.border.medium, '.rdg-cell': { + // Prevent collisions with custom cell components + zIndex: 2, borderRight: 'none', }, },