@atlaskit/editor-plugin-table 7.5.5 → 7.5.7

package/src/nodeviews/OverflowShadowsObserver.ts

@@ -1,3 +1,5 @@
+import rafSchedule from 'raf-schd';
+
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
@@ -82,11 +84,8 @@ export class OverflowShadowsObserver {
     if (!stickyCell) {
       return;
     }
-    const newStickyRowHeight = stickyCell.clientHeight + 1;
-    if (newStickyRowHeight! === this.stickyRowHeight) {
-      this.stickyRowHeight = newStickyRowHeight;
-      this.updateStickyShadows(this.stickyRowHeight);
-    }
+
+    this.updateStickyShadows();
   }
 
   private getStickyCell() {
@@ -96,8 +95,14 @@ export class OverflowShadowsObserver {
   }
 
   observeShadowSentinels = (isSticky?: boolean) => {
+    if (this.isSticky === isSticky) {
+      return;
+    }
+
     this.isSticky = !!isSticky;
 
+    // reset height
+    this.stickyRowHeight = 0;
     // update sticky shadows
     this.updateStickyShadowsHeightIfChanged();
 
@@ -126,7 +131,7 @@ export class OverflowShadowsObserver {
    * e.g. bounds on an IntersectionObserverEntry, otherwise proceed with
    * reading it from sticky cell
    */
-  updateStickyShadows = (stickyRowHeight?: number) => {
+  updateStickyShadows = rafSchedule((stickyRowHeight?: number) => {
     if (!this.isSticky) {
       return;
     }
@@ -134,21 +139,27 @@ export class OverflowShadowsObserver {
     if (!stickyCell || !this.wrapper?.parentElement) {
       return;
     }
-    const heightStyleOrCompute = `${
-      stickyRowHeight || stickyCell.clientHeight + 1
-    }px`;
-    // Use getElementsByClassName here for a live node list to capture
-    // sticky shadows
-    const liveRightShadows =
-      this.wrapper?.parentElement?.getElementsByClassName(
-        `${ClassName.TABLE_RIGHT_SHADOW}`,
-      );
-    const liveLeftShadows = this.wrapper?.parentElement?.getElementsByClassName(
-      `${ClassName.TABLE_LEFT_SHADOW}`,
-    );
-    updateShadowListForStickyStyles(heightStyleOrCompute, liveLeftShadows);
-    updateShadowListForStickyStyles(heightStyleOrCompute, liveRightShadows);
-  };
+
+    // Reflow Warning! - stickyCell.clientHeight
+    const newStickyRowHeight = stickyRowHeight || stickyCell.clientHeight + 1;
+
+    if (newStickyRowHeight !== this.stickyRowHeight) {
+      this.stickyRowHeight = newStickyRowHeight;
+      const heightStyleOrCompute = `${newStickyRowHeight}px`;
+      // Use getElementsByClassName here for a live node list to capture
+      // sticky shadows
+      const liveRightShadows =
+        this.wrapper?.parentElement?.getElementsByClassName(
+          `${ClassName.TABLE_RIGHT_SHADOW}`,
+        );
+      const liveLeftShadows =
+        this.wrapper?.parentElement?.getElementsByClassName(
+          `${ClassName.TABLE_LEFT_SHADOW}`,
+        );
+      updateShadowListForStickyStyles(heightStyleOrCompute, liveLeftShadows);
+      updateShadowListForStickyStyles(heightStyleOrCompute, liveRightShadows);
+    }
+  });
 
   dispose() {
     if (this.tableIntersectionObserver) {

package/src/nodeviews/TableCell.ts

@@ -1,13 +1,9 @@
-import uuid from 'uuid';
-
 import type { CellDomAttrs } from '@atlaskit/adf-schema';
 import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 
-import { getPluginState } from '../pm-plugins/plugin-factory';
-
 import TableNodeView from './TableNodeViewBase';
 
 const DEFAULT_COL_SPAN = 1;
@@ -22,26 +18,10 @@ export default class TableCell
     view: EditorView,
     getPos: () => number | undefined,
     eventDispatcher: EventDispatcher,
-    private readonly observer?: ResizeObserver,
   ) {
     super(node, view, getPos, eventDispatcher);
-
-    const { pluginConfig, isDragAndDropEnabled } = getPluginState(view.state);
-
-    this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
-    this.isDragAndDropEnabled = !!isDragAndDropEnabled;
-
-    if (observer) {
-      this.contentDOM.id = uuid();
-      observer.observe(this.contentDOM);
-    }
   }
 
-  // @ts-ignore
-  private isStickyHeaderEnabled: boolean;
-  // @ts-ignore
-  private isDragAndDropEnabled: boolean;
-
   update(node: PMNode) {
     const didUpdate = this.updateNodeView(node);
     if (didUpdate) {
@@ -50,12 +30,6 @@ export default class TableCell
     return didUpdate;
   }
 
-  destroy() {
-    if (this.observer) {
-      this.observer.unobserve(this.contentDOM);
-    }
-  }
-
   private updateNodeView(node: PMNode) {
     if (this.node.type !== node.type) {
       return false;

package/src/nodeviews/TableComponent.tsx

@@ -84,6 +84,12 @@ const isIE11 = browser.ie_version === 11;
 // To make sure we capture the last update, we use setTimeout.
 const initialOverflowCaptureTimeroutDelay = 300;
 
+// This is a hard switch for controlling whether the overflow analytics should be dispatched. There has been 6months of data
+// already collected which we could use but have not. This has been disabled rather then removed entirely in the event that
+// the current collected data becomes stale and we want to start collecting fresh data again in future.
+// PLEASE NOTE: that the current way this alaytics has been configured WILL cause reflows to occur. This is why the has been disabled.
+const isOverflowAnalyticsEnabled = false;
+
 export interface ComponentProps {
   view: EditorView;
   getNode: () => PmNode;
@@ -114,6 +120,8 @@ interface TableState {
   stickyHeader?: RowStickyState;
   [ShadowEvent.SHOW_BEFORE_SHADOW]: boolean;
   [ShadowEvent.SHOW_AFTER_SHADOW]: boolean;
+  tableWrapperWidth?: number;
+  tableWrapperHeight?: number;
 }
 
 class TableComponent extends React.Component<ComponentProps, TableState> {
@@ -124,6 +132,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     parentWidth: undefined,
     [ShadowEvent.SHOW_BEFORE_SHADOW]: false,
     [ShadowEvent.SHOW_AFTER_SHADOW]: false,
+    tableWrapperWidth: undefined,
+    tableWrapperHeight: undefined,
   };
 
   private wrapper?: HTMLDivElement | null;
@@ -136,6 +146,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
   private isInitialOverflowSent: boolean;
   private initialOverflowCaptureTimerId?: ReturnType<typeof setTimeout>;
+  private resizeObserver?: ResizeObserver;
 
   private dragAndDropCleanupFn?: CleanupFn;
 
@@ -158,6 +169,21 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       },
     );
 
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        this.setState((prev) => {
+          return prev?.tableWrapperWidth === entry.contentRect?.width &&
+            prev?.tableWrapperHeight === entry.contentRect?.height
+            ? prev
+            : {
+                ...prev,
+                tableWrapperWidth: entry.contentRect.width,
+                tableWrapperHeight: entry.contentRect.height,
+              };
+        });
+      }
+    });
+
     // Disable inline table editing and resizing controls in Firefox
     // https://github.com/ProseMirror/prosemirror/issues/432
     if ('execCommand' in document) {
@@ -231,11 +257,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
     eventDispatcher.on((stickyHeadersPluginKey as any).key, this.onStickyState);
 
-    const initialIsOveflowing =
-      this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
-      this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+    if (isOverflowAnalyticsEnabled) {
+      const initialIsOveflowing =
+        this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
+        this.state[ShadowEvent.SHOW_AFTER_SHADOW];
 
-    this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+      this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+    }
   }
 
   componentWillUnmount() {
@@ -254,6 +282,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       this.dragAndDropCleanupFn();
     }
 
+    this.resizeObserver?.disconnect();
+
     const { stickyScrollbar } = getEditorFeatureFlags();
 
     if (stickyScrollbar) {
@@ -308,7 +338,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       return;
     }
 
-    const { width: tableNodeWidth } = tableNode.attrs;
+    const tableNodeWidth = getTableContainerWidth(tableNode);
     const shouldTableScale = tableRenderWidth < tableNodeWidth;
 
     const { width: containerWidthValue } = containerWidth;
@@ -325,7 +355,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         isTableScalingEnabled: true,
       });
 
-      updateColgroup(resizeState, this.table!, tableNode, true);
+      // Request animation frame required for Firefox
+      requestAnimationFrame(() => {
+        updateColgroup(resizeState, this.table!, tableNode, true);
+      });
     }
     this.containerWidth = containerWidth;
   }
@@ -418,38 +451,42 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
       this.handleTableResizingDebounced();
     }
+    if (isOverflowAnalyticsEnabled) {
+      const newIsOverflowing =
+        this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
+        this.state[ShadowEvent.SHOW_AFTER_SHADOW];
 
-    const newIsOverflowing =
-      this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
-      this.state[ShadowEvent.SHOW_AFTER_SHADOW];
-
-    const prevIsOverflowing =
-      prevState[ShadowEvent.SHOW_BEFORE_SHADOW] ||
-      prevState[ShadowEvent.SHOW_AFTER_SHADOW];
+      const prevIsOverflowing =
+        prevState[ShadowEvent.SHOW_BEFORE_SHADOW] ||
+        prevState[ShadowEvent.SHOW_AFTER_SHADOW];
 
-    if (this.initialOverflowCaptureTimerId) {
-      clearTimeout(this.initialOverflowCaptureTimerId);
-    }
-
-    if (!this.isInitialOverflowSent) {
-      this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
-    }
+      if (this.initialOverflowCaptureTimerId) {
+        clearTimeout(this.initialOverflowCaptureTimerId);
+      }
 
-    if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
-      const {
-        dispatch,
-        state: { tr },
-      } = this.props.view;
+      if (!this.isInitialOverflowSent) {
+        this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
+      }
 
-      dispatch(
-        tr.setMeta(META_KEYS.OVERFLOW_STATE_CHANGED, {
-          isOverflowing: newIsOverflowing,
-          wasOverflowing: prevIsOverflowing,
-          editorWidth: this.props.containerWidth.width || 0,
-          width: this.node.attrs.width || 0,
-          parentWidth: this.state?.parentWidth || 0,
-        }),
-      );
+      if (
+        this.isInitialOverflowSent &&
+        prevIsOverflowing !== newIsOverflowing
+      ) {
+        const {
+          dispatch,
+          state: { tr },
+        } = this.props.view;
+
+        dispatch(
+          tr.setMeta(META_KEYS.OVERFLOW_STATE_CHANGED, {
+            isOverflowing: newIsOverflowing,
+            wasOverflowing: prevIsOverflowing,
+            editorWidth: this.props.containerWidth.width || 0,
+            width: this.node.attrs.width || 0,
+            parentWidth: this.state?.parentWidth || 0,
+          }),
+        );
+      }
     }
   }
 
@@ -471,6 +508,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     }
   };
 
+  private observeTable(table: HTMLTableElement | null) {
+    if (table) {
+      this.resizeObserver?.observe(table);
+    }
+  }
+
   onStickyState = (state: StickyPluginState) => {
     const pos = this.props.getPos();
     if (!isValidPosition(pos, this.props.view.state)) {
@@ -539,6 +582,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         selection={view.state.selection}
         headerRowHeight={headerRow ? headerRow.offsetHeight : undefined}
         stickyHeader={this.state.stickyHeader}
+        tableWrapperWidth={this.state.tableWrapperWidth}
       />
     );
     const tableContainerWidth = getTableContainerWidth(node);
@@ -563,6 +607,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         tableContainerWidth={tableContainerWidth}
         isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
         getScrollOffset={() => this.wrapper?.scrollLeft || 0}
+        tableWrapperHeight={this.state.tableWrapperHeight}
       />
     ) : null;
 
@@ -615,6 +660,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         isBreakoutEnabled={options?.isBreakoutEnabled}
         isNested={isNested}
         pluginInjectionApi={pluginInjectionApi}
+        tableWrapperHeight={this.state.tableWrapperHeight}
         isTableResizingEnabled={options?.isTableResizingEnabled}
         isResizing={isResizing}
         isTableScalingEnabled={isTableScalingEnabled}
@@ -668,6 +714,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
               if (tableElement !== this.table) {
                 this.table = tableElement;
                 this.createShadowSentinels(this.table);
+                this.observeTable(this.table);
               }
             }
           }}

package/src/nodeviews/TableContainer.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react';
-import React, { forwardRef, useCallback, useRef } from 'react';
+import React, { forwardRef, useCallback, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 
@@ -78,6 +78,7 @@ type ResizableTableContainerProps = {
   isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
   isTableScalingEnabled?: boolean;
+  tableWrapperHeight?: number;
 };
 
 export const ResizableTableContainer = React.memo(
@@ -92,9 +93,11 @@ export const ResizableTableContainer = React.memo(
     isResizing,
     pluginInjectionApi,
     isTableScalingEnabled,
+    tableWrapperHeight,
   }: PropsWithChildren<ResizableTableContainerProps>) => {
     const containerRef = useRef<HTMLDivElement | null>(null);
     const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
+    const [resizing, setIsResizing] = useState(false);
 
     const updateContainerHeight = useCallback((height: number | 'auto') => {
       // current StickyHeader State is not stable to be fetch.
@@ -108,41 +111,26 @@ export const ResizableTableContainer = React.memo(
         //    1px is border width but collapse make it 0.5.
         // -- When sticky header appear, we should add first row height but reduce
         //    collapsed border
-        containerRef.current?.style.setProperty(
-          'height',
-          typeof height === 'number' ? `${height + 40.5}px` : 'auto',
-        );
+        return typeof height === 'number' ? `${height + 40.5}px` : 'auto';
       } else {
         const stickyHeaderHeight =
           containerRef.current
             ?.getElementsByTagName('th')[0]
             .getBoundingClientRect().height || 0;
-        containerRef.current?.style.setProperty(
-          'height',
-          typeof height === 'number'
-            ? `${height + stickyHeaderHeight + 39.5}px`
-            : 'auto',
-        );
+
+        return typeof height === 'number'
+          ? `${height + stickyHeaderHeight + 39.5}px`
+          : 'auto';
       }
     }, []);
 
-    const resizeObserverRef = useRef(
-      new ResizeObserver((entries) => {
-        updateContainerHeight(entries[entries.length - 1].contentRect.height);
-      }),
-    );
-
     const onResizeStart = useCallback(() => {
-      if (tableRef) {
-        resizeObserverRef.current.observe(tableRef);
-      }
-    }, [tableRef]);
+      setIsResizing(true);
+    }, []);
 
     const onResizeStop = useCallback(() => {
-      updateContainerHeight('auto');
-
-      resizeObserverRef.current.disconnect();
-    }, [updateContainerHeight]);
+      setIsResizing(false);
+    }, []);
 
     const updateWidth = useCallback((width: number) => {
       if (!containerRef.current) {
@@ -239,6 +227,9 @@ export const ResizableTableContainer = React.memo(
         <div
           style={{
             width: tableWidthRef.current,
+            height: resizing
+              ? updateContainerHeight(tableWrapperHeight ?? 'auto')
+              : 'auto',
           }}
           className={ClassName.TABLE_RESIZER_CONTAINER}
           ref={containerRef}
@@ -267,6 +258,7 @@ type TableContainerProps = {
   isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
   isTableScalingEnabled?: boolean;
+  tableWrapperHeight?: number;
 };
 
 export const TableContainer = ({
@@ -280,6 +272,7 @@ export const TableContainer = ({
   getPos,
   tableRef,
   isNested,
+  tableWrapperHeight,
   isResizing,
   pluginInjectionApi,
   isTableScalingEnabled,
@@ -293,6 +286,7 @@ export const TableContainer = ({
         editorView={editorView}
         getPos={getPos}
         tableRef={tableRef}
+        tableWrapperHeight={tableWrapperHeight}
         isResizing={isResizing}
         pluginInjectionApi={pluginInjectionApi}
         isTableScalingEnabled={isTableScalingEnabled}

package/src/nodeviews/TableResizer.tsx

@@ -125,10 +125,7 @@ const getResizerHandleHeight = (
 
 const getResizerMinWidth = (node: PMNode) => {
   const currentColumnCount = getColgroupChildrenLength(node);
-  const minColumnWidth =
-    currentColumnCount <= 3
-      ? currentColumnCount * COLUMN_MIN_WIDTH
-      : 3 * COLUMN_MIN_WIDTH;
+  const minColumnWidth = Math.min(3, currentColumnCount) * COLUMN_MIN_WIDTH;
   // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
   // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
   return minColumnWidth + 1;

package/src/plugin.tsx

@@ -135,10 +135,11 @@ export type TablePlugin = NextEditorPlugin<
 const tablesPlugin: TablePlugin = ({ config: options, api }) => {
   const editorViewRef: Record<'current', EditorView | null> = { current: null };
   const defaultGetEditorContainerWidth: GetEditorContainerWidth = () => {
-    const defaultState = {
-      width: document?.body?.offsetWidth ?? 500,
-    };
-    return api?.width?.sharedState.currentState() ?? defaultState;
+    return (
+      api?.width?.sharedState.currentState() ?? {
+        width: document?.body?.offsetWidth ?? 500,
+      }
+    );
   };
   const editorAnalyticsAPI = api?.analytics?.actions;
 

package/src/pm-plugins/main.ts

@@ -77,7 +77,6 @@ import TableRow from '../nodeviews/TableRow';
 import { pluginKey as decorationsPluginKey } from '../pm-plugins/decorations/plugin';
 import { fixTables, replaceSelectedTable } from '../transforms';
 import type {
-  ElementContentRects,
   InvalidNodeAttr,
   PluginConfig,
   PluginInjectionAPI,
@@ -134,19 +133,6 @@ export const createPlugin = (
     getIntl,
   });
 
-  let elementContentRects: ElementContentRects = {};
-
-  const observer = window?.ResizeObserver
-    ? new ResizeObserver((entries) => {
-        entries.forEach((entry) => {
-          if (!entry.target.id) {
-            return;
-          }
-          elementContentRects[entry.target.id] = entry.contentRect;
-        });
-      })
-    : undefined;
-
   // Used to prevent invalid table cell spans being reported more than once per editor/document
   const invalidTableIds: string[] = [];
   let editorViewRef: EditorView | null = null;
@@ -282,11 +268,6 @@ export const createPlugin = (
             removeResizeHandleDecorations()(state, dispatch);
           }
         },
-        destroy: () => {
-          if (observer) {
-            observer.disconnect();
-          }
-        },
       };
     },
     props: {
@@ -417,9 +398,9 @@ export const createPlugin = (
         tableRow: (node, view, getPos) =>
           new TableRow(node, view, getPos, eventDispatcher),
         tableCell: (node, view, getPos) =>
-          new TableCell(node, view, getPos, eventDispatcher, observer),
+          new TableCell(node, view, getPos, eventDispatcher),
         tableHeader: (node, view, getPos) =>
-          new TableCell(node, view, getPos, eventDispatcher, observer),
+          new TableCell(node, view, getPos, eventDispatcher),
       },
       handleDOMEvents: {
         focus: handleFocus,
@@ -428,7 +409,7 @@ export const createPlugin = (
         mouseover: withCellTracking(whenTableInFocus(handleMouseOver)),
         mouseleave: handleMouseLeave,
         mouseout: whenTableInFocus(handleMouseOut),
-        mousemove: whenTableInFocus(handleMouseMove, elementContentRects),
+        mousemove: whenTableInFocus(handleMouseMove),
         mouseenter: handleMouseEnter,
         mouseup: whenTableInFocus(handleMouseUp),
         click: withCellTracking(whenTableInFocus(handleClick)),

package/src/pm-plugins/table-resizing/utils/colgroup.ts

@@ -5,7 +5,7 @@ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
-import { MAX_SCALING_PERCENT } from './consts';
+import { getTableScalingPercent } from './misc';
 
 type Col = Array<string | { [name: string]: string }>;
 
@@ -29,13 +29,10 @@ export const generateColgroup = (table: PmNode, tableRef?: HTMLElement) => {
         // We slice here to guard against our colwidth array having more entries
         // Than the we actually span. We'll patch the document at a later point.
         if (tableRef) {
-          const tableWidth = table.attrs && table.attrs.width;
-          let renderWidth = tableRef.parentElement?.clientWidth || 760;
-          let scalePercent = renderWidth / tableWidth;
-          scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+          const scalePercent = getTableScalingPercent(table, tableRef);
           cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
             const fixedColWidth = getColWidthFix(width, map.width);
-            const scaledWidth = fixedColWidth * Math.min(scalePercent, 1);
+            const scaledWidth = fixedColWidth * scalePercent;
             const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
             cols.push([
               'col',

package/src/pm-plugins/table-resizing/utils/misc.ts

@@ -31,6 +31,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import type { TableOptions } from '../../../nodeviews/types';
 
 import { hasTableBeenResized } from './colgroup';
+import { MAX_SCALING_PERCENT } from './consts';
 
 // Translates named layouts in number values.
 export function getLayoutSize(
@@ -156,3 +157,15 @@ export const getTableElementWidth = (table: PMNode) => {
 export const getTableContainerElementWidth = (table: PMNode) => {
   return getTableContainerWidth(table);
 };
+
+export const getTableScalingPercent = (
+  table: PMNode,
+  tableRef: HTMLElement,
+) => {
+  const tableWidth = getTableContainerElementWidth(table);
+  let renderWidth = tableRef.parentElement?.clientWidth || tableWidth;
+  // minus 1 here to avoid any 1px scroll in Firefox
+  let scalePercent = (renderWidth - 1) / tableWidth;
+  scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+  return Math.min(scalePercent, 1);
+};