diff --git a/packages/table/src/common/utils.ts b/packages/table/src/common/utils.ts index e37f4fda60..05de754853 100644 --- a/packages/table/src/common/utils.ts +++ b/packages/table/src/common/utils.ts @@ -14,7 +14,10 @@ * limitations under the License. */ -const CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT = "bp-table-text-no-measure"; +// used to exclude icons from column header measure +export const CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT = "bp-table-text-no-measure"; +// supposed width of the icons placeholder +const EXCLUDED_ICON_PLACEHOLDER_WIDTH = 16; /** * Since Firefox doesn't provide a computed "font" property, we manually @@ -350,23 +353,20 @@ export const Utils = { * exclude an element's text from the computation. */ function measureTextContentWithExclusions(context: CanvasRenderingContext2D, element: Element): TextMetrics { - // We only expect one or zero excluded elements in this subtree - // We don't have a need for more than one, so we avoid that complexity altogether. - const elementToExclude = element.querySelector(`.${CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT}`); - let removedElementParent: Element | undefined; - let removedElementNextSibling: Node | undefined; - - if (elementToExclude != null) { - removedElementParent = elementToExclude.parentElement; - removedElementNextSibling = elementToExclude.nextSibling; - removedElementParent.removeChild(elementToExclude); + const elementsToExclude = element.querySelectorAll(`.${CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT}`); + let excludedElementsWidth = 0; + if (elementsToExclude && elementsToExclude.length) { + elementsToExclude.forEach((e) => { + const excludedMetrics = context.measureText(e.textContent); + excludedElementsWidth += excludedMetrics.width - EXCLUDED_ICON_PLACEHOLDER_WIDTH; + }); } const metrics = context.measureText(element.textContent); + const metricsWithExclusions = { + ...metrics, + width: metrics.width - excludedElementsWidth, + }; - if (elementToExclude != null) { - removedElementParent.insertBefore(elementToExclude, removedElementNextSibling); - } - - return metrics; + return metricsWithExclusions; } diff --git a/packages/table/src/headers/columnHeaderCell.tsx b/packages/table/src/headers/columnHeaderCell.tsx index 568911a529..97be63b318 100644 --- a/packages/table/src/headers/columnHeaderCell.tsx +++ b/packages/table/src/headers/columnHeaderCell.tsx @@ -31,6 +31,7 @@ import { import * as Classes from "../common/classes"; import { columnInteractionBarContextTypes, IColumnInteractionBarContextTypes } from "../common/context"; import { LoadableContent } from "../common/loadableContent"; +import { CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT } from "../common/utils"; import { HeaderCell, IHeaderCellProps } from "./headerCell"; export interface IColumnNameProps { @@ -196,7 +197,7 @@ export class ColumnHeaderCell extends AbstractPureComponent2 : this.wrapInDragReorderable( index,
-
+
,