@atlaskit/editor-plugin-table 2.5.5 → 2.6.1

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

@@ -4,17 +4,37 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 React, { useCallback, useMemo, useRef, useState } from 'react';
 import rafSchd from 'raf-schd';
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
-import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
+import { TableMap } from '@atlaskit/editor-tables';
+import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, hasTableBeenResized, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 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';
 var handles = {
   right: true
 };
 var tableHandleMarginTop = 11;
+var generateResizedPayload = function generateResizedPayload(props) {
+  var _props$originalNode$a;
+  var tableMap = TableMap.get(props.resizedNode);
+  return {
+    action: TABLE_ACTION.RESIZED,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      newWidth: props.resizedNode.attrs.width,
+      prevWidth: (_props$originalNode$a = props.originalNode.attrs.width) !== null && _props$originalNode$a !== void 0 ? _props$originalNode$a : null,
+      nodeSize: props.resizedNode.nodeSize,
+      totalTableWidth: hasTableBeenResized(props.resizedNode) ? getTableWidth(props.resizedNode) : null,
+      totalRowCount: tableMap.height,
+      totalColumnCount: tableMap.width
+    }
+  };
+};
 export var TableResizer = function TableResizer(_ref) {
   var children = _ref.children,
     width = _ref.width,
@@ -24,7 +44,8 @@ export var TableResizer = function TableResizer(_ref) {
     getPos = _ref.getPos,
     node = _ref.node,
     tableRef = _ref.tableRef,
-    displayGuideline = _ref.displayGuideline;
+    displayGuideline = _ref.displayGuideline,
+    attachAnalyticsEvent = _ref.attachAnalyticsEvent;
   var currentColumnCount = getColgroupChildrenLength(node);
   var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
   var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
@@ -78,6 +99,7 @@ export var TableResizer = function TableResizer(_ref) {
       resizing: false
     });
     if (typeof pos === 'number') {
+      var _attachAnalyticsEvent;
       tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
         width: newWidth
       }));
@@ -88,6 +110,11 @@ export var TableResizer = function TableResizer(_ref) {
         start: pos + 1,
         parentWidth: newWidth
       }, editorView.domAtPos.bind(editorView))(tr);
+      var scaledNode = tr.doc.nodeAt(pos);
+      (_attachAnalyticsEvent = attachAnalyticsEvent(generateResizedPayload({
+        originalNode: node,
+        resizedNode: scaledNode
+      }))) === null || _attachAnalyticsEvent === void 0 ? void 0 : _attachAnalyticsEvent(tr);
     }
     dispatch(tr);
 
@@ -95,7 +122,26 @@ export var TableResizer = function TableResizer(_ref) {
     displayGuideline([]);
     updateWidth(newWidth);
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline]);
+  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent]);
+  var handleResize = useCallback(function (originalState, delta) {
+    var newWidth = originalState.width + delta.width;
+    var pos = getPos();
+    if (typeof pos !== 'number') {
+      return;
+    }
+    previewScaleTable(tableRef, {
+      node: node,
+      prevNode: node,
+      start: pos + 1,
+      parentWidth: newWidth
+    }, editorView.domAtPos.bind(editorView));
+    updateActiveGuidelines(findClosestSnap(newWidth, defaultGuidelineWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP));
+    updateWidth(newWidth);
+    return newWidth;
+  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines]);
+  var scheduleResize = useMemo(function () {
+    return rafSchd(handleResize);
+  }, [handleResize]);
   return /*#__PURE__*/React.createElement(ResizerNext, {
     enable: handles,
     width: width,
@@ -103,22 +149,7 @@ export var TableResizer = function TableResizer(_ref) {
     handleHeightSize: handleHeightSize,
     handleMarginTop: tableHandleMarginTop,
     handleResizeStart: handleResizeStart,
-    handleResize: rafSchd(function (originalState, delta) {
-      var newWidth = originalState.width + delta.width;
-      var pos = getPos();
-      if (typeof pos !== 'number') {
-        return;
-      }
-      previewScaleTable(tableRef, {
-        node: node,
-        prevNode: node,
-        start: pos + 1,
-        parentWidth: newWidth
-      }, editorView.domAtPos.bind(editorView));
-      updateActiveGuidelines(findClosestSnap(newWidth, defaultGuidelineWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP));
-      updateWidth(newWidth);
-      return newWidth;
-    }),
+    handleResize: scheduleResize,
     handleResizeStop: handleResizeStop,
     resizeRatio: 2,
     minWidth: minColumnWidth,

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.5.5",
+	"version": "2.6.1",
 	"sideEffects": false
 }

package/dist/types/plugins/table/nodeviews/TableResizer.d.ts

@@ -1,6 +1,8 @@
 import { PropsWithChildren } from 'react';
 import { Node as PMNode } from 'prosemirror-model';
+import { Transaction } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
+import { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
 interface TableResizerProps {
     width: number;
@@ -11,6 +13,7 @@ interface TableResizerProps {
     node: PMNode;
     tableRef: HTMLTableElement;
     displayGuideline: (guideline: GuidelineConfig[]) => boolean;
+    attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
 }
-export declare const TableResizer: ({ children, width, maxWidth, updateWidth, editorView, getPos, node, tableRef, displayGuideline, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
 export {};

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/nodeviews/TableResizer.d.ts

@@ -1,6 +1,8 @@
 import { PropsWithChildren } from 'react';
 import { Node as PMNode } from 'prosemirror-model';
+import { Transaction } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
+import { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
 interface TableResizerProps {
     width: number;
@@ -11,6 +13,7 @@ interface TableResizerProps {
     node: PMNode;
     tableRef: HTMLTableElement;
     displayGuideline: (guideline: GuidelineConfig[]) => boolean;
+    attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
 }
-export declare const TableResizer: ({ children, width, maxWidth, updateWidth, editorView, getPos, node, tableRef, displayGuideline, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
 export {};

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.5.5",
+  "version": "2.6.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^26.3.0",
-    "@atlaskit/editor-common": "^74.26.0",
+    "@atlaskit/editor-common": "^74.27.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.6",

package/src/__tests__/unit/nodeviews/TableContainer.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
 
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import { TableAttributes } from '@atlaskit/adf-schema';
+import {
+  ACTION_SUBJECT,
+  EVENT_TYPE,
+  TABLE_ACTION,
+} from '@atlaskit/editor-common/analytics';
 import { akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
@@ -43,12 +48,12 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
     });
   };
   const createNode = (attrs?: TableAttributes) => {
-    const { editorView: view } = editor(
-      doc(p('text'), table(attrs)(tr(td()(p('{<>}text')), tdEmpty, tdEmpty))),
+    const { editorView } = editor(
+      doc(table(attrs)(tr(td()(p('{<>}text')), tdEmpty, tdEmpty))),
     );
-    const resolvedTable = findTable(view.state.selection);
+    const resolvedTable = findTable(editorView.state.selection);
 
-    return resolvedTable!.node;
+    return { editorView, node: resolvedTable!.node };
   };
 
   describe('show correct container for FF and options', () => {
@@ -56,7 +61,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       isTableResizingEnabled: boolean,
       isBreakoutEnabled: boolean = true,
     ) => {
-      const node = createNode();
+      const { node, editorView } = createNode();
 
       const { container } = render(
         <TableContainer
@@ -68,7 +73,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
           isTableResizingEnabled={isTableResizingEnabled}
           isBreakoutEnabled={isBreakoutEnabled}
           className={''}
-          editorView={{} as any}
+          editorView={editorView}
           getPos={() => 1}
           tableRef={{} as any}
           isNested={false}
@@ -94,7 +99,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       isTableResizingEnabled: boolean,
       isBreakoutEnabled: boolean = true,
     ) => {
-      const node = createNode();
+      const { node, editorView } = createNode();
 
       const { container } = render(
         <TableContainer
@@ -106,7 +111,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
           isTableResizingEnabled={isTableResizingEnabled}
           isBreakoutEnabled={isBreakoutEnabled}
           className={''}
-          editorView={{} as any}
+          editorView={editorView}
           getPos={() => 1}
           tableRef={{} as any}
           isNested={true}
@@ -129,7 +134,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
 
   describe('sets width and margin correctly for resizable container', () => {
     const buildContainer = (attrs: TableAttributes) => {
-      const node = createNode(attrs);
+      const { node, editorView } = createNode(attrs);
 
       const { container } = render(
         <ResizableTableContainer
@@ -137,7 +142,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
           lineLength={720}
           node={node}
           className={''}
-          editorView={{} as any}
+          editorView={editorView}
           getPos={() => 1}
           tableRef={{} as any}
         />,
@@ -154,4 +159,62 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       expect(style.marginLeft).toBe('-120px');
     });
   });
+
+  describe('analytics', () => {
+    const buildContainer = (attrs: TableAttributes) => {
+      const { node, editorView } = createNode(attrs);
+      const analyticsMock = jest.fn();
+
+      const { container } = render(
+        <ResizableTableContainer
+          containerWidth={1800}
+          lineLength={720}
+          node={node}
+          className={''}
+          editorView={editorView}
+          getPos={() => 0}
+          tableRef={
+            {
+              querySelector: () => null,
+              insertBefore: () => {},
+              style: {},
+            } as any
+          }
+          pluginInjectionApi={
+            {
+              dependencies: {
+                analytics: { actions: { attachAnalyticsEvent: analyticsMock } },
+              },
+            } as any
+          }
+        />,
+      );
+
+      return { container, analyticsMock };
+    };
+
+    test('fires when resizing is finished', async () => {
+      const { container, analyticsMock } = buildContainer({ layout: 'wide' });
+
+      fireEvent.mouseDown(container.querySelector('.resizer-handle-right')!);
+      fireEvent.mouseMove(container.querySelector('.resizer-handle-right')!);
+      fireEvent.mouseMove(container.querySelector('.resizer-handle-right')!);
+      fireEvent.mouseMove(container.querySelector('.resizer-handle-right')!);
+      fireEvent.mouseUp(container.querySelector('.resizer-handle-right')!);
+
+      expect(analyticsMock).toHaveBeenLastCalledWith({
+        action: TABLE_ACTION.RESIZED,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          width: undefined, // Can't get the events right to trigger re-resizeable
+          prevWidth: null,
+          nodeSize: 20,
+          totalTableWidth: null,
+          totalRowCount: 1,
+          totalColumnCount: 3,
+        },
+      });
+    });
+  });
 });

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/TableContainer.tsx

@@ -9,6 +9,7 @@ import classNames from 'classnames';
 import { Node as PMNode } from 'prosemirror-model';
 import { EditorView } from 'prosemirror-view';
 
+import { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { EditorContainerWidth } from '@atlaskit/editor-common/types';
@@ -115,15 +116,20 @@ export const ResizableTableContainer = ({
     [pluginInjectionApi, editorView],
   );
 
-  const tableWidth = getTableContainerWidth(node);
+  const attachAnalyticsEvent = useCallback(
+    (payload: TableEventPayload) => {
+      return pluginInjectionApi?.dependencies?.analytics.actions.attachAnalyticsEvent(
+        payload,
+      );
+    },
+    [pluginInjectionApi],
+  );
 
+  const tableWidth = getTableContainerWidth(node);
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   const responsiveContainerWidth = containerWidth - 76;
-
   const width = Math.min(tableWidth, responsiveContainerWidth);
-
   marginLeftRef.current = getMarginLeft(lineLength, width);
-
   const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
 
   return (
@@ -141,6 +147,7 @@ export const ResizableTableContainer = ({
         node={node}
         tableRef={tableRef}
         displayGuideline={displayGuideline}
+        attachAnalyticsEvent={attachAnalyticsEvent}
       >
         <InnerContainer className={className} node={node}>
           {children}