@atlaskit/editor-plugin-table 3.0.4 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "3.0.4",
+  "version": "3.1.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^29.1.0",
-    "@atlaskit/editor-common": "^75.2.0",
+    "@atlaskit/editor-common": "^75.5.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
@@ -110,6 +110,9 @@
     },
     "platform.editor.table-remove-update-resize-handles_djvab": {
       "type": "boolean"
+    },
+    "platform.editor.table.overflow-state-analytics": {
+      "type": "boolean"
     }
   }
 }

package/src/plugins/table/commands/insert.ts

@@ -1,10 +1,14 @@
 // #region Imports
 import { AddColumnStep } from '@atlaskit/adf-schema/steps';
-import { Command } from '@atlaskit/editor-common/types';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-import { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
+import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
+import type {
+  Command,
+  GetEditorContainerWidth,
+} from '@atlaskit/editor-common/types';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {
   addColumnAt as addColumnAtPMUtils,
@@ -14,6 +18,7 @@ import {
   selectedRect,
 } from '@atlaskit/editor-tables/utils';
 
+import { META_KEYS } from '../pm-plugins/table-analytics';
 import { rescaleColumns } from '../transforms/column-width';
 import { checkIfHeaderRowEnabled, copyPreviousRow } from '../utils';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
@@ -50,6 +55,9 @@ export function addColumnAt(getEditorContainerWidth: GetEditorContainerWidth) {
           updatedTr,
         );
       }
+      updatedTr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+        name: TABLE_OVERFLOW_CHANGE_TRIGGER.ADDED_COLUMN,
+      });
       return updatedTr;
     };
   };

package/src/plugins/table/commands/toggle.ts

@@ -1,11 +1,13 @@
 //#region Imports
 
-import { TableLayout } from '@atlaskit/adf-schema';
-import { Command } from '@atlaskit/editor-common/types';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { TableLayout } from '@atlaskit/adf-schema';
+import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
+import type { Command } from '@atlaskit/editor-common/types';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { findTable, toggleHeader } from '@atlaskit/editor-tables/utils';
 
 import { createCommand } from '../pm-plugins/plugin-factory';
+import { META_KEYS } from '../pm-plugins/table-analytics';
 //#endregion
 
 // #region Utils
@@ -45,13 +47,21 @@ export const toggleHeaderColumn: Command = (state, dispatch): boolean =>
 export const toggleNumberColumn: Command = (state, dispatch) => {
   const { tr } = state;
   const { node, pos } = findTable(state.selection)!;
+  const isNumberedColumnEnabled = node.attrs.isNumberColumnEnabled;
 
   tr.setNodeMarkup(pos, state.schema.nodes.table, {
     ...node.attrs,
-    isNumberColumnEnabled: !node.attrs.isNumberColumnEnabled,
+    isNumberColumnEnabled: !isNumberedColumnEnabled,
   });
   tr.setMeta('scrollIntoView', false);
 
+  const tableOverflowChangeTriggerName = isNumberedColumnEnabled
+    ? TABLE_OVERFLOW_CHANGE_TRIGGER.DISABLED_NUMBERED_COLUMN
+    : TABLE_OVERFLOW_CHANGE_TRIGGER.ENABLED_NUMBERED_COLUMN;
+  tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+    name: tableOverflowChangeTriggerName,
+  });
+
   if (dispatch) {
     dispatch(tr);
   }
@@ -77,6 +87,9 @@ export const toggleTableLayout: Command = (state, dispatch): boolean => {
         ...table.node.attrs,
         layout,
       });
+      tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+        name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED,
+      });
       return tr.setMeta('scrollIntoView', false);
     },
   )(state, dispatch);

package/src/plugins/table/index.tsx

@@ -41,6 +41,7 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { createTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
@@ -53,6 +54,10 @@ import {
   findStickyHeaderForTable,
   pluginKey as stickyHeadersPluginKey,
 } from './pm-plugins/sticky-headers';
+import {
+  createPlugin as createTableAnalyticsPlugin,
+  pluginKey as tableAnalyticsPluginKey,
+} from './pm-plugins/table-analytics';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
 import {
   createPlugin as createFlexiResizingPlugin,
@@ -290,7 +295,17 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                 )
               : undefined,
         },
-
+        {
+          name: 'tableAnalyticsPlugin',
+          plugin: ({ dispatch, dispatchAnalyticsEvent }) =>
+            getBooleanFF('platform.editor.table.overflow-state-analytics')
+              ? createTableAnalyticsPlugin(
+                  dispatch,
+                  dispatchAnalyticsEvent,
+                  options?.tableResizingEnabled ?? false,
+                )
+              : undefined,
+        },
         {
           name: 'tableGetEditorViewReferencePlugin',
           plugin: () => {
@@ -337,6 +352,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         >
           <WithPluginState
             plugins={{
+              tableAnalyticsPluginState: tableAnalyticsPluginKey,
               tablePluginState: pluginKey,
               tableWidthPluginState: tableWidthPluginKey,
               tableResizingPluginState: tableResizingPluginKey,

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

@@ -6,14 +6,25 @@ import memoizeOne from 'memoize-one';
 import rafSchedule from 'raf-schd';
 
 import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
+import {
+  ACTION_SUBJECT,
+  EVENT_TYPE,
+  TABLE_ACTION,
+} from '@atlaskit/editor-common/analytics';
+import type { AnalyticsDispatch } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import { createDispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import type {
   EditorContainerWidth,
   GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
-import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
+import {
+  analyticsEventKey,
+  browser,
+  isValidPosition,
+} from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
@@ -30,6 +41,7 @@ import {
   findStickyHeaderForTable,
   pluginKey as stickyHeadersPluginKey,
 } from '../pm-plugins/sticky-headers';
+import { META_KEYS } from '../pm-plugins/table-analytics';
 import {
   getLayoutSize,
   insertColgroupFromNode as recreateResizeColsByNode,
@@ -53,6 +65,10 @@ import { TableContainer } from './TableContainer';
 import type { TableOptions } from './types';
 
 const isIE11 = browser.ie_version === 11;
+// When table is inserted via paste, keyboard shortcut or quickInsert,
+// componentDidUpdate is called multiple times. The isOverflowing value is correct only on the last update.
+// To make sure we capture the last update, we use setTimeout.
+const initialOverflowCaptureTimeroutDelay = 300;
 export interface ComponentProps {
   view: EditorView;
   getNode: () => PmNode;
@@ -81,6 +97,7 @@ interface TableState {
   [ShadowEvent.SHOW_BEFORE_SHADOW]: boolean;
   [ShadowEvent.SHOW_AFTER_SHADOW]: boolean;
 }
+
 class TableComponent extends React.Component<ComponentProps, TableState> {
   static displayName = 'TableComponent';
 
@@ -98,11 +115,15 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   private layoutSize?: number;
   private overflowShadowsObserver?: OverflowShadowsObserver;
 
+  private isInitialOverflowSent: boolean;
+  private initialOverflowCaptureTimerId?: ReturnType<typeof setTimeout>;
+
   constructor(props: ComponentProps) {
     super(props);
     const { options, containerWidth, getNode } = props;
     this.node = getNode();
     this.containerWidth = containerWidth;
+    this.isInitialOverflowSent = false;
 
     // store table size using previous full-width mode so can detect if it has changed
     const isFullWidthModeEnabled = options
@@ -153,6 +174,14 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     }
 
     eventDispatcher.on((stickyHeadersPluginKey as any).key, this.onStickyState);
+
+    if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
+      const initialIsOveflowing =
+        this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
+        this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+
+      this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+    }
   }
 
   componentWillUnmount() {
@@ -181,9 +210,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       (stickyHeadersPluginKey as any).key,
       this.onStickyState,
     );
+
+    if (this.initialOverflowCaptureTimerId) {
+      clearTimeout(this.initialOverflowCaptureTimerId);
+    }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(_: any, prevState: TableState) {
     const {
       view,
       getNode,
@@ -249,6 +282,44 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
       this.handleTableResizingDebounced();
     }
+
+    if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
+      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];
+
+      if (this.initialOverflowCaptureTimerId) {
+        clearTimeout(this.initialOverflowCaptureTimerId);
+      }
+
+      if (!this.isInitialOverflowSent) {
+        this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
+      }
+
+      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,
+          }),
+        );
+      }
+    }
   }
 
   private updateShadowState = (shadowKey: ShadowEvent, value: boolean) => {
@@ -577,6 +648,32 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     dispatch(tr);
   };
 
+  private setTimerToSendInitialOverflowCaptured = (isOverflowing: boolean) => {
+    const { eventDispatcher, containerWidth, options } = this.props;
+    const dispatch: AnalyticsDispatch = createDispatch(eventDispatcher);
+    const parentWidth = this.state?.parentWidth || 0;
+
+    this.initialOverflowCaptureTimerId = setTimeout(() => {
+      dispatch(analyticsEventKey, {
+        payload: {
+          action: TABLE_ACTION.INITIAL_OVERFLOW_CAPTURED,
+          actionSubject: ACTION_SUBJECT.TABLE,
+          actionSubjectId: null,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            editorWidth: containerWidth.width || 0,
+            isOverflowing,
+            tableResizingEnabled: options?.isTableResizingEnabled || false,
+            width: this.node.attrs.width || 0,
+            parentWidth,
+          },
+        },
+      });
+
+      this.isInitialOverflowSent = true;
+    }, initialOverflowCaptureTimeroutDelay);
+  };
+
   private handleAutoSize = () => {
     if (this.table) {
       const { view, getNode, getPos, containerWidth } = this.props;

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

@@ -11,6 +11,7 @@ import rafSchd from 'raf-schd';
 import { defineMessages, useIntl } from 'react-intl-next';
 
 import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
+import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import type {
@@ -25,6 +26,7 @@ import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { getPluginState } from '../pm-plugins/plugin-factory';
+import { META_KEYS } from '../pm-plugins/table-analytics';
 import {
   COLUMN_MIN_WIDTH,
   getColgroupChildrenLength,
@@ -215,6 +217,10 @@ export const TableResizer = ({
     tr.setMeta(tableWidthPluginKey, { resizing: true });
     displayGapCursor(false);
 
+    tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+      name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED,
+    });
+
     dispatch(tr);
 
     const visibleGuidelines = getVisibleGuidelines(

package/src/plugins/table/pm-plugins/table-analytics.ts

@@ -0,0 +1,102 @@
+/**
+ * A plugin is created for collecting payload data for tableOverflowChanged analytics event
+ */
+import {
+  ACTION_SUBJECT,
+  EVENT_TYPE,
+  TABLE_ACTION,
+  TABLE_OVERFLOW_CHANGE_TRIGGER,
+} from '@atlaskit/editor-common/analytics';
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+
+interface LastTrigger {
+  name: TABLE_OVERFLOW_CHANGE_TRIGGER;
+}
+
+type TableAnalyticsPluginState = {
+  lastTrigger: LastTrigger | undefined;
+};
+
+export const pluginKey = new PluginKey<TableAnalyticsPluginState>(
+  'tableAnalyticsPlugin',
+);
+
+export const META_KEYS = {
+  OVERFLOW_TRIGGER: 'tableOverflowTrigger',
+  OVERFLOW_STATE_CHANGED: 'tableOverflowStateChanged',
+};
+
+const createPlugin = (
+  dispatch: Dispatch,
+  dispatchAnalyticsEvent: DispatchAnalyticsEvent,
+  tableResizingEnabled: boolean,
+) =>
+  new SafePlugin({
+    key: pluginKey,
+    state: {
+      init() {
+        return {
+          lastTrigger: undefined,
+        };
+      },
+      apply(tr, pluginState) {
+        const meta = tr.getMeta(META_KEYS.OVERFLOW_TRIGGER);
+        const newState = { ...pluginState };
+        if (meta) {
+          newState.lastTrigger = { ...meta };
+          dispatch(pluginKey, newState);
+          return newState;
+        }
+
+        return pluginState;
+      },
+    },
+    appendTransaction: (transactions, oldState, newState) => {
+      const newPluginState = pluginKey.getState(newState);
+      let hasAnalyticsBeenDispatched = false;
+      let lastTriggerName =
+        newPluginState?.lastTrigger?.name ||
+        // NOTE: We assume that we know and can correctly differentiate
+        // between all triggers of table overflow state change.
+        // The only trigger we can't identify is viewport width change.
+        // However, since there is still a chance that there are other triggers we didn't think of,
+        // all these unknown triggers and viwport width change trigger are captured as EXTERNAL.
+        TABLE_OVERFLOW_CHANGE_TRIGGER.EXTERNAL;
+
+      transactions.forEach((tr) => {
+        const payload = tr.getMeta(META_KEYS.OVERFLOW_STATE_CHANGED);
+
+        if (payload) {
+          dispatchAnalyticsEvent({
+            action: TABLE_ACTION.OVERFLOW_CHANGED,
+            actionSubject: ACTION_SUBJECT.TABLE,
+            actionSubjectId: null,
+            eventType: EVENT_TYPE.TRACK,
+            attributes: {
+              editorWidth: payload.editorWidth,
+              parentWidth: payload.parentWidth,
+              isOverflowing: payload.isOverflowing,
+              wasOverflowing: payload.wasOverflowing,
+              width: payload.width,
+              tableResizingEnabled,
+              trigger: lastTriggerName,
+            },
+          });
+
+          hasAnalyticsBeenDispatched = true;
+        }
+      });
+
+      if (hasAnalyticsBeenDispatched) {
+        const tr = newState.tr;
+        return tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {});
+      }
+
+      return undefined;
+    },
+  });
+
+export { createPlugin };

package/src/plugins/table/pm-plugins/table-resizing/commands.ts

@@ -1,13 +1,16 @@
+import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import type { Command } from '@atlaskit/editor-common/types';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
 
 import { updateColumnWidths } from '../../transforms';
+import { META_KEYS } from '../table-analytics';
 
 import { createCommand, getPluginState } from './plugin-factory';
-import { evenAllColumnsWidths, isClickNear, ResizeState } from './utils';
+import type { ResizeState } from './utils';
+import { evenAllColumnsWidths, isClickNear } from './utils';
 
 export const evenColumns =
   ({
@@ -60,6 +63,9 @@ export const distributeColumnsWidths =
         table.node,
         table.start,
       )(state.tr);
+      tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+        name: TABLE_OVERFLOW_CHANGE_TRIGGER.DISTRIBUTED_COLUMNS,
+      });
       stopResizing(tr)(state, dispatch);
     }
 

package/src/plugins/table/pm-plugins/table-resizing/event-handlers.ts

@@ -3,6 +3,7 @@ import {
   ACTION_SUBJECT,
   EVENT_TYPE,
   TABLE_ACTION,
+  TABLE_OVERFLOW_CHANGE_TRIGGER,
 } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
@@ -20,6 +21,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { updateResizeHandleDecorations } from '../../commands/misc';
 import { updateColumnWidths } from '../../transforms';
 import { getSelectedColumnIndexes, updateResizeHandles } from '../../utils';
+import { META_KEYS } from '../table-analytics';
 
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
@@ -53,6 +55,14 @@ export const handleMouseDown = (
   }
   event.preventDefault();
 
+  if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
+    const tr = view.state.tr;
+    tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+      name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED_COLUMN,
+    });
+    dispatch(tr);
+  }
+
   const mouseDownTime = event.timeStamp;
   const cell = state.doc.nodeAt(localResizeHandlePos);
   const $cell = state.doc.resolve(localResizeHandlePos);

package/src/plugins/table/transforms/delete-columns.ts

@@ -1,10 +1,15 @@
-import { CellAttributes } from '@atlaskit/adf-schema';
+import type { CellAttributes } from '@atlaskit/adf-schema';
 import { AddColumnStep } from '@atlaskit/adf-schema/steps';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
-import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
+import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
+import { META_KEYS } from '../pm-plugins/table-analytics';
+
 import { splitCellsInColumns } from './split';
 
 const deleteColumnsCustomStep =
@@ -244,6 +249,9 @@ function fixRowSpans(table: PMNode): PMNode | null {
 export const deleteColumns =
   (rect: Rect, allowAddColumnCustomStep = false) =>
   (tr: Transaction): Transaction => {
+    tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+      name: TABLE_OVERFLOW_CHANGE_TRIGGER.DELETED_COLUMN,
+    });
     if (allowAddColumnCustomStep) {
       return deleteColumnsCustomStep(rect)(tr);
     }

package/src/plugins/table/ui/ui-styles.ts

@@ -481,7 +481,7 @@ const getLastColumnResizerOverrides = () => {
           .${ClassName.RESIZE_HANDLE_DECORATION} {
           background-color: transparent;
           position: absolute;
-          width: ${resizeHandlerAreaWidth}px;
+          width: ${resizeHandlerAreaWidth / 2}px;
           height: 100%;
           top: 0;
           right: 0;