@atlaskit/editor-plugin-table 2.6.0 → 2.6.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 2.6.1
+
+### Patch Changes
+
+- [`84516fbd72d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/84516fbd72d) - [ux] ED-19068: fix numbered columns scroll bar issue
+
 ## 2.6.0
 
 ### Minor Changes

package/dist/cjs/plugins/table/nodeviews/TableComponent.js

@@ -25,6 +25,7 @@ var _commands = require("../commands");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _stickyHeaders = require("../pm-plugins/sticky-headers");
 var _utils3 = require("../pm-plugins/table-resizing/utils");
+var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
 var _dom = require("../pm-plugins/table-resizing/utils/dom");
 var _types = require("../types");
 var _TableFloatingControls = _interopRequireDefault(require("../ui/TableFloatingControls"));
@@ -140,9 +141,21 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         if (shouldScaleTable) {
           _this.scaleTable({
             parentWidth: parentWidth,
-            layoutChanged: layoutChanged
+            layoutChanged: layoutChanged,
+            isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
           });
         }
+
+        // only when table resizing is enabled and toggle numbered column to run scaleTable
+        if (options !== null && options !== void 0 && options.isTableResizingEnabled && hasNumberedColumnChanged) {
+          if (!(0, _colgroup.hasTableBeenResized)(prevNode)) {
+            _this.scaleTable({
+              parentWidth: parentWidth,
+              layoutChanged: layoutChanged,
+              isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
+            });
+          }
+        }
         _this.updateParentWidth(parentWidth);
       }
       _this.node = node;

package/dist/cjs/plugins/table/nodeviews/table.js

@@ -20,6 +20,7 @@ var _prosemirrorModel = require("prosemirror-model");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _createPluginConfig = require("../create-plugin-config");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
@@ -36,7 +37,7 @@ var tableAttributes = function tableAttributes(node, options, state, pos) {
   // this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
   // support screen size adjustments
   var shouldHaveInlineWidth = (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) && !(0, _utils2.isTableNested)(state, pos);
-  var style = shouldHaveInlineWidth ? "width: ".concat((0, _nodeWidth.getTableContainerWidth)(node), "px") : undefined;
+  var style = shouldHaveInlineWidth ? "width: ".concat(node.attrs.isNumberColumnEnabled ? (0, _nodeWidth.getTableContainerWidth)(node) - _editorSharedStyles.akEditorTableNumberColumnWidth : (0, _nodeWidth.getTableContainerWidth)(node), "px") : undefined;
   return {
     'data-number-column': node.attrs.isNumberColumnEnabled,
     'data-layout': node.attrs.layout,

package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/scale-table.js

@@ -8,6 +8,7 @@ exports.scaleTable = exports.scale = exports.previewScaleTable = void 0;
 exports.scaleTableTo = scaleTableTo;
 exports.scaleWithParent = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _transforms = require("../../../transforms");
@@ -32,12 +33,13 @@ var scale = function scale(tableRef, options, domAtPos) {
     prevNode = options.prevNode,
     start = options.start,
     isBreakoutEnabled = options.isBreakoutEnabled,
-    layoutChanged = options.layoutChanged;
-  var maxSize = (0, _misc.getLayoutSize)(node.attrs.layout, containerWidth, {
+    layoutChanged = options.layoutChanged,
+    isTableResizingEnabled = options.isTableResizingEnabled;
+  var maxSize = isTableResizingEnabled ? (0, _nodeWidth.getTableContainerWidth)(node) : (0, _misc.getLayoutSize)(node.attrs.layout, containerWidth, {
     isBreakoutEnabled: isBreakoutEnabled
   });
   var prevTableWidth = (0, _utils.getTableWidth)(prevNode);
-  var previousMaxSize = (0, _misc.getLayoutSize)(prevNode.attrs.layout, previousContainerWidth, {
+  var previousMaxSize = isTableResizingEnabled ? (0, _nodeWidth.getTableContainerWidth)(node) : (0, _misc.getLayoutSize)(prevNode.attrs.layout, previousContainerWidth, {
     isBreakoutEnabled: isBreakoutEnabled
   });
   var newWidth = maxSize;
@@ -116,7 +118,9 @@ var previewScaleTable = function previewScaleTable(tableRef, options, domAtPos)
     return;
   }
   if (parentWidth) {
-    tableRef.style.width = "".concat(parentWidth, "px");
+    var isNumberColumnEnabled = node.attrs.isNumberColumnEnabled;
+    var width = isNumberColumnEnabled ? parentWidth - _editorSharedStyles.akEditorTableNumberColumnWidth : parentWidth;
+    tableRef.style.width = "".concat(width, "px");
   }
   if (!(0, _colgroup.hasTableBeenResized)(node)) {
     return;
@@ -138,7 +142,6 @@ var scaleTable = function scaleTable(tableRef, options, domAtPos) {
       start = options.start,
       parentWidth = options.parentWidth,
       layoutChanged = options.layoutChanged;
-
     // If a table has not been resized yet, columns should be auto.
     if ((0, _colgroup.hasTableBeenResized)(node) === false) {
       // If its not a re-sized table, we still want to re-create cols

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.6.0",
+	"version": "2.6.1",
 	"sideEffects": false
 }

package/dist/es2019/plugins/table/nodeviews/TableComponent.js

@@ -12,6 +12,7 @@ import { autoSizeTable, clearHoverSelection } from '../commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
 import { getLayoutSize, insertColgroupFromNode as recreateResizeColsByNode, scaleTable } from '../pm-plugins/table-resizing/utils';
+import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import TableFloatingControls from '../ui/TableFloatingControls';
@@ -125,9 +126,21 @@ class TableComponent extends React.Component {
         if (shouldScaleTable) {
           this.scaleTable({
             parentWidth,
-            layoutChanged
+            layoutChanged,
+            isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
           });
         }
+
+        // only when table resizing is enabled and toggle numbered column to run scaleTable
+        if (options !== null && options !== void 0 && options.isTableResizingEnabled && hasNumberedColumnChanged) {
+          if (!hasTableBeenResized(prevNode)) {
+            this.scaleTable({
+              parentWidth,
+              layoutChanged,
+              isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
+            });
+          }
+        }
         this.updateParentWidth(parentWidth);
       }
       this.node = node;

package/dist/es2019/plugins/table/nodeviews/table.js

@@ -4,6 +4,7 @@ import { DOMSerializer } from 'prosemirror-model';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { pluginConfig as getPluginConfig } from '../create-plugin-config';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -18,7 +19,7 @@ const tableAttributes = (node, options, state, pos) => {
   // this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
   // support screen size adjustments
   const shouldHaveInlineWidth = (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) && !isTableNested(state, pos);
-  let style = shouldHaveInlineWidth ? `width: ${getTableContainerWidth(node)}px` : undefined;
+  let style = shouldHaveInlineWidth ? `width: ${node.attrs.isNumberColumnEnabled ? getTableContainerWidth(node) - akEditorTableNumberColumnWidth : getTableContainerWidth(node)}px` : undefined;
   return {
     'data-number-column': node.attrs.isNumberColumnEnabled,
     'data-layout': node.attrs.layout,

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/scale-table.js

@@ -1,3 +1,4 @@
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { updateColumnWidths } from '../../../transforms';
@@ -21,13 +22,14 @@ export const scale = (tableRef, options, domAtPos) => {
     prevNode,
     start,
     isBreakoutEnabled,
-    layoutChanged
+    layoutChanged,
+    isTableResizingEnabled
   } = options;
-  const maxSize = getLayoutSize(node.attrs.layout, containerWidth, {
+  const maxSize = isTableResizingEnabled ? getTableContainerWidth(node) : getLayoutSize(node.attrs.layout, containerWidth, {
     isBreakoutEnabled
   });
   const prevTableWidth = getTableWidth(prevNode);
-  const previousMaxSize = getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {
+  const previousMaxSize = isTableResizingEnabled ? getTableContainerWidth(node) : getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {
     isBreakoutEnabled
   });
   let newWidth = maxSize;
@@ -110,7 +112,9 @@ export const previewScaleTable = (tableRef, options, domAtPos) => {
     return;
   }
   if (parentWidth) {
-    tableRef.style.width = `${parentWidth}px`;
+    const isNumberColumnEnabled = node.attrs.isNumberColumnEnabled;
+    const width = isNumberColumnEnabled ? parentWidth - akEditorTableNumberColumnWidth : parentWidth;
+    tableRef.style.width = `${width}px`;
   }
   if (!hasTableBeenResized(node)) {
     return;
@@ -132,7 +136,6 @@ export const scaleTable = (tableRef, options, domAtPos) => tr => {
     parentWidth,
     layoutChanged
   } = options;
-
   // If a table has not been resized yet, columns should be auto.
   if (hasTableBeenResized(node) === false) {
     // If its not a re-sized table, we still want to re-create cols

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.6.0",
+	"version": "2.6.1",
 	"sideEffects": false
 }

package/dist/esm/plugins/table/nodeviews/TableComponent.js

@@ -22,6 +22,7 @@ import { autoSizeTable, clearHoverSelection } from '../commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
 import { getLayoutSize, insertColgroupFromNode as recreateResizeColsByNode, scaleTable } from '../pm-plugins/table-resizing/utils';
+import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import TableFloatingControls from '../ui/TableFloatingControls';
@@ -133,9 +134,21 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         if (shouldScaleTable) {
           _this.scaleTable({
             parentWidth: parentWidth,
-            layoutChanged: layoutChanged
+            layoutChanged: layoutChanged,
+            isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
           });
         }
+
+        // only when table resizing is enabled and toggle numbered column to run scaleTable
+        if (options !== null && options !== void 0 && options.isTableResizingEnabled && hasNumberedColumnChanged) {
+          if (!hasTableBeenResized(prevNode)) {
+            _this.scaleTable({
+              parentWidth: parentWidth,
+              layoutChanged: layoutChanged,
+              isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
+            });
+          }
+        }
         _this.updateParentWidth(parentWidth);
       }
       _this.node = node;

package/dist/esm/plugins/table/nodeviews/table.js

@@ -15,6 +15,7 @@ import { DOMSerializer } from 'prosemirror-model';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { pluginConfig as getPluginConfig } from '../create-plugin-config';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -29,7 +30,7 @@ var tableAttributes = function tableAttributes(node, options, state, pos) {
   // this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
   // support screen size adjustments
   var shouldHaveInlineWidth = (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) && !isTableNested(state, pos);
-  var style = shouldHaveInlineWidth ? "width: ".concat(getTableContainerWidth(node), "px") : undefined;
+  var style = shouldHaveInlineWidth ? "width: ".concat(node.attrs.isNumberColumnEnabled ? getTableContainerWidth(node) - akEditorTableNumberColumnWidth : getTableContainerWidth(node), "px") : undefined;
   return {
     'data-number-column': node.attrs.isNumberColumnEnabled,
     'data-layout': node.attrs.layout,

package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/scale-table.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { updateColumnWidths } from '../../../transforms';
@@ -23,12 +24,13 @@ export var scale = function scale(tableRef, options, domAtPos) {
     prevNode = options.prevNode,
     start = options.start,
     isBreakoutEnabled = options.isBreakoutEnabled,
-    layoutChanged = options.layoutChanged;
-  var maxSize = getLayoutSize(node.attrs.layout, containerWidth, {
+    layoutChanged = options.layoutChanged,
+    isTableResizingEnabled = options.isTableResizingEnabled;
+  var maxSize = isTableResizingEnabled ? getTableContainerWidth(node) : getLayoutSize(node.attrs.layout, containerWidth, {
     isBreakoutEnabled: isBreakoutEnabled
   });
   var prevTableWidth = getTableWidth(prevNode);
-  var previousMaxSize = getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {
+  var previousMaxSize = isTableResizingEnabled ? getTableContainerWidth(node) : getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {
     isBreakoutEnabled: isBreakoutEnabled
   });
   var newWidth = maxSize;
@@ -105,7 +107,9 @@ export var previewScaleTable = function previewScaleTable(tableRef, options, dom
     return;
   }
   if (parentWidth) {
-    tableRef.style.width = "".concat(parentWidth, "px");
+    var isNumberColumnEnabled = node.attrs.isNumberColumnEnabled;
+    var width = isNumberColumnEnabled ? parentWidth - akEditorTableNumberColumnWidth : parentWidth;
+    tableRef.style.width = "".concat(width, "px");
   }
   if (!hasTableBeenResized(node)) {
     return;
@@ -126,7 +130,6 @@ export var scaleTable = function scaleTable(tableRef, options, domAtPos) {
       start = options.start,
       parentWidth = options.parentWidth,
       layoutChanged = options.layoutChanged;
-
     // If a table has not been resized yet, columns should be auto.
     if (hasTableBeenResized(node) === false) {
       // If its not a re-sized table, we still want to re-create cols

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.6.0",
+	"version": "2.6.1",
 	"sideEffects": false
 }

package/dist/types/plugins/table/pm-plugins/table-resizing/utils/scale-table.d.ts

@@ -12,6 +12,7 @@ export interface ScaleOptions {
     layoutChanged?: boolean;
     isBreakoutEnabled?: boolean;
     isFullWidthModeEnabled?: boolean;
+    isTableResizingEnabled?: boolean;
 }
 export declare const scale: (tableRef: HTMLTableElement, options: ScaleOptions, domAtPos: DomAtPos) => ResizeState | undefined;
 export declare const scaleWithParent: (tableRef: HTMLTableElement, parentWidth: number, table: PMNode, start: number, domAtPos: DomAtPos) => ResizeState;

package/dist/types-ts4.5/plugins/table/pm-plugins/table-resizing/utils/scale-table.d.ts

@@ -12,6 +12,7 @@ export interface ScaleOptions {
     layoutChanged?: boolean;
     isBreakoutEnabled?: boolean;
     isFullWidthModeEnabled?: boolean;
+    isTableResizingEnabled?: boolean;
 }
 export declare const scale: (tableRef: HTMLTableElement, options: ScaleOptions, domAtPos: DomAtPos) => ResizeState | undefined;
 export declare const scaleWithParent: (tableRef: HTMLTableElement, parentWidth: number, table: PMNode, start: number, domAtPos: DomAtPos) => ResizeState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -31,6 +31,7 @@ import {
   insertColgroupFromNode as recreateResizeColsByNode,
   scaleTable,
 } from '../pm-plugins/table-resizing/utils';
+import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import {
   TableCssClassName as ClassName,
@@ -562,8 +563,24 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
       // If column has been inserted/deleted avoid multi dispatch
       if (shouldScaleTable) {
-        this.scaleTable({ parentWidth, layoutChanged });
+        this.scaleTable({
+          parentWidth,
+          layoutChanged,
+          isTableResizingEnabled: options?.isTableResizingEnabled,
+        });
       }
+
+      // only when table resizing is enabled and toggle numbered column to run scaleTable
+      if (options?.isTableResizingEnabled && hasNumberedColumnChanged) {
+        if (!hasTableBeenResized(prevNode)) {
+          this.scaleTable({
+            parentWidth,
+            layoutChanged,
+            isTableResizingEnabled: options?.isTableResizingEnabled,
+          });
+        }
+      }
+
       this.updateParentWidth(parentWidth);
     }
 
@@ -575,6 +592,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   private scaleTable = (scaleOptions: {
     layoutChanged: boolean;
     parentWidth?: number;
+    isTableResizingEnabled?: boolean;
   }) => {
     const { view, getNode, getPos, containerWidth, options } = this.props;
     const node = getNode();

package/src/plugins/table/nodeviews/TableResizer.tsx

@@ -38,7 +38,6 @@ import { TABLE_HIGHLIGHT_GAP, TABLE_SNAP_GAP } from '../ui/consts';
 import { getTableWidth } from '../utils';
 import { defaultGuidelines, defaultGuidelineWidths } from '../utils/guidelines';
 import { findClosestSnap } from '../utils/snapping';
-
 interface TableResizerProps {
   width: number;
   maxWidth: number;

package/src/plugins/table/nodeviews/table.tsx

@@ -20,6 +20,7 @@ import type {
   getPosHandlerNode,
 } from '@atlaskit/editor-common/types';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 
 import { pluginConfig as getPluginConfig } from '../create-plugin-config';
@@ -49,7 +50,11 @@ const tableAttributes = (
     options?.isTableResizingEnabled && !isTableNested(state, pos);
 
   let style = shouldHaveInlineWidth
-    ? `width: ${getTableContainerWidth(node)}px`
+    ? `width: ${
+        node.attrs.isNumberColumnEnabled
+          ? getTableContainerWidth(node) - akEditorTableNumberColumnWidth
+          : getTableContainerWidth(node)
+      }px`
     : undefined;
 
   return {

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

@@ -2,6 +2,7 @@ import { Node as PMNode } from 'prosemirror-model';
 import { Transaction } from 'prosemirror-state';
 import type { DomAtPos } from 'prosemirror-utils';
 
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 
@@ -29,6 +30,7 @@ export interface ScaleOptions {
   layoutChanged?: boolean;
   isBreakoutEnabled?: boolean;
   isFullWidthModeEnabled?: boolean;
+  isTableResizingEnabled?: boolean;
 }
 
 // Base function to trigger the actual scale on a table node.
@@ -51,24 +53,27 @@ export const scale = (
     start,
     isBreakoutEnabled,
     layoutChanged,
+    isTableResizingEnabled,
   } = options;
 
-  const maxSize = getLayoutSize(node.attrs.layout, containerWidth, {
-    isBreakoutEnabled,
-  });
+  const maxSize = isTableResizingEnabled
+    ? getTableContainerWidth(node)
+    : getLayoutSize(node.attrs.layout, containerWidth, {
+        isBreakoutEnabled,
+      });
+
   const prevTableWidth = getTableWidth(prevNode);
-  const previousMaxSize = getLayoutSize(
-    prevNode.attrs.layout,
-    previousContainerWidth,
-    {
-      isBreakoutEnabled,
-    },
-  );
+  const previousMaxSize = isTableResizingEnabled
+    ? getTableContainerWidth(node)
+    : getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {
+        isBreakoutEnabled,
+      });
 
   let newWidth = maxSize;
 
   // adjust table width if layout is updated
   const hasOverflow = prevTableWidth > previousMaxSize;
+
   if (layoutChanged && hasOverflow) {
     // No keep overflow if the old content can be in the new size
     const canFitInNewSize = prevTableWidth < maxSize;
@@ -157,7 +162,11 @@ export const previewScaleTable = (
   }
 
   if (parentWidth) {
-    tableRef.style.width = `${parentWidth}px`;
+    const isNumberColumnEnabled = node.attrs.isNumberColumnEnabled;
+    const width = isNumberColumnEnabled
+      ? parentWidth - akEditorTableNumberColumnWidth
+      : parentWidth;
+    tableRef.style.width = `${width}px`;
   }
 
   if (!hasTableBeenResized(node)) {
@@ -186,7 +195,6 @@ export const scaleTable =
     }
 
     const { node, start, parentWidth, layoutChanged } = options;
-
     // If a table has not been resized yet, columns should be auto.
     if (hasTableBeenResized(node) === false) {
       // If its not a re-sized table, we still want to re-create cols