@atlaskit/editor-plugin-table 5.3.1 → 5.3.2

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

@@ -46,6 +46,7 @@ export let TableDecorations = /*#__PURE__*/function (TableDecorations) {
 }({});
 export const TableCssClassName = {
   ...TableSharedCssClassName,
+  /** Classic controls */
   COLUMN_CONTROLS: `${tablePrefixSelector}-column-controls`,
   COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`,
   COLUMN_SELECTED: `${tablePrefixSelector}-column__selected`,
@@ -76,8 +77,13 @@ export const TableCssClassName = {
   CORNER_CONTROLS_INSERT_ROW_MARKER: `${tablePrefixSelector}-corner-controls__insert-row-marker`,
   CORNER_CONTROLS_INSERT_COLUMN_MARKER: `${tablePrefixSelector}-corner-controls__insert-column-marker`,
   CONTROLS_CORNER_BUTTON: `${tablePrefixSelector}-corner-button`,
+  /** Controls with drag handle */
+  COLUMN_CONTROLS_DECORATIONS_WITH_DRAG: `${tablePrefixSelector}-column-controls-decoration-with-drag`,
+  ROW_CONTROLS_WITH_DRAG: `${tablePrefixSelector}-row-controls-with-drag`,
+  /** Other classes */
   NUMBERED_COLUMN: `${tablePrefixSelector}-numbered-column`,
   NUMBERED_COLUMN_BUTTON: `${tablePrefixSelector}-numbered-column__button`,
+  NUMBERED_COLUMN_BUTTON_DISABLED: `${tablePrefixSelector}-numbered-column__button-disabled`,
   HOVERED_COLUMN: `${tablePrefixSelector}-hovered-column`,
   HOVERED_ROW: `${tablePrefixSelector}-hovered-row`,
   HOVERED_TABLE: `${tablePrefixSelector}-hovered-table`,

package/dist/es2019/plugins/table/ui/DragHandle/index.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef } from 'react';
+import { DragHandleButton } from '@atlaskit/pragmatic-drag-and-drop-react-accessibility/drag-handle-button';
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+// TODO: use for now, in future replace with custom @atlaskit/icon/glyph/drag-handler
+// width is too large (24px), should be 16px
+export const DragHandle = ({
+  tableLocalId,
+  direction = 'row',
+  indexes,
+  onClick,
+  onMouseOver,
+  onMouseOut
+}) => {
+  const dragHandleDivRef = useRef(null);
+  useEffect(() => {
+    const dragHandleDivRefCurrent = dragHandleDivRef.current;
+    if (dragHandleDivRefCurrent) {
+      return draggable({
+        element: dragHandleDivRefCurrent,
+        getInitialData() {
+          return {
+            localId: tableLocalId,
+            type: `table-${direction}`,
+            indexes
+          };
+        }
+      });
+    }
+  }, [tableLocalId, direction, indexes]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dragHandleDivRef,
+    style: {
+      backgroundColor: `${"var(--ds-surface, white)"}`,
+      borderRadius: '4px',
+      border: `2px solid ${"var(--ds-surface, white)"}`,
+      transform: direction === 'column' ? 'rotate(90deg)' : 'none'
+    }
+  }, /*#__PURE__*/React.createElement(DragHandleButton, {
+    label: "blah"
+  }));
+};

package/dist/es2019/plugins/table/ui/TableFloatingControls/NumberColumn/index.js

@@ -1,10 +1,13 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
+import classnames from 'classnames';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { isRowSelected } from '@atlaskit/editor-tables/utils';
-import { clearHoverSelection } from '../../../commands';
+import { clearHoverSelection, hoverCell } from '../../../commands';
+import { getPluginState } from '../../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowHeights } from '../../../utils';
+import { tableBorderColor } from '../../consts';
 export default class NumberColumn extends Component {
   constructor(...args) {
     super(...args);
@@ -47,7 +50,38 @@ export default class NumberColumn extends Component {
         clearHoverSelection()(state, dispatch);
       }
     });
-    _defineProperty(this, "getClassNames", index => {
+    _defineProperty(this, "updateDragHandleLocation", rowIndex => {
+      const {
+        editorView,
+        tableActive
+      } = this.props;
+      const {
+        state,
+        dispatch
+      } = editorView;
+      const {
+        hoveredCell
+      } = getPluginState(state);
+      if (tableActive && hoveredCell.rowIndex !== rowIndex) {
+        hoverCell(rowIndex, hoveredCell.colIndex)(state, dispatch);
+      }
+    });
+    _defineProperty(this, "getCellStyles", (index, rowHeight) => {
+      const {
+        stickyTop,
+        hasHeaderRow
+      } = this.props;
+      if (stickyTop && hasHeaderRow && index === 0) {
+        return {
+          height: rowHeight,
+          top: `${stickyTop}px`
+        };
+      }
+      return {
+        height: rowHeight
+      };
+    });
+    _defineProperty(this, "getClassNames", (index, isButtonDisabled = false) => {
       const {
         hoveredRows,
         editorView,
@@ -55,29 +89,39 @@ export default class NumberColumn extends Component {
         isResizing
       } = this.props;
       const isActive = isRowSelected(index)(editorView.state.selection) || (hoveredRows || []).indexOf(index) !== -1 && !isResizing;
-      return [ClassName.NUMBERED_COLUMN_BUTTON, isActive ? ClassName.HOVERED_CELL_ACTIVE : '', isActive && isInDanger ? ClassName.HOVERED_CELL_IN_DANGER : ''].join(' ');
+      return classnames(ClassName.NUMBERED_COLUMN_BUTTON, {
+        [ClassName.NUMBERED_COLUMN_BUTTON_DISABLED]: isButtonDisabled,
+        [ClassName.HOVERED_CELL_IN_DANGER]: isActive && isInDanger,
+        [ClassName.HOVERED_CELL_ACTIVE]: isActive
+      });
     });
   }
   render() {
     const {
       tableRef,
-      hasHeaderRow
+      hasHeaderRow,
+      isDragAndDropEnabled,
+      tableActive
     } = this.props;
     const rowHeights = getRowHeights(tableRef);
     return /*#__PURE__*/React.createElement("div", {
       className: ClassName.NUMBERED_COLUMN,
       style: {
-        marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined
+        marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
+        borderLeft: isDragAndDropEnabled && tableActive ? `1px solid ${tableBorderColor()}` : undefined
       },
       contentEditable: false
-    }, rowHeights.map((rowHeight, index) => /*#__PURE__*/React.createElement("div", {
+    }, rowHeights.map((rowHeight, index) => isDragAndDropEnabled ? /*#__PURE__*/React.createElement("div", {
+      key: `wrapper-${index}`,
+      className: this.getClassNames(index, true),
+      "data-index": index,
+      style: this.getCellStyles(index, rowHeight),
+      onMouseOver: () => this.updateDragHandleLocation(index)
+    }, hasHeaderRow ? index > 0 ? index : null : index + 1) : /*#__PURE__*/React.createElement("div", {
       key: `wrapper-${index}`,
       className: this.getClassNames(index),
       "data-index": index,
-      style: {
-        height: rowHeight,
-        top: this.props.stickyTop !== undefined && hasHeaderRow && index === 0 ? `${this.props.stickyTop}px` : undefined
-      },
+      style: this.getCellStyles(index, rowHeight),
       onClick: event => this.selectRow(index, event),
       onMouseOver: () => this.hoverRows(index),
       onMouseOut: this.clearHoverSelection

package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/ClassicControls.js

@@ -0,0 +1,86 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+import { defineMessages, injectIntl } from 'react-intl-next';
+import { clearHoverSelection } from '../../../commands';
+import { TableCssClassName as ClassName } from '../../../types';
+import { getRowClassNames, getRowHeights, getRowsParams } from '../../../utils';
+import { tableControlsSpacing, tableToolbarSize } from '../../consts';
+const messages = defineMessages({
+  rowControl: {
+    id: 'fabric.editor.rowControl',
+    defaultMessage: 'Highlight row',
+    description: 'A button on the left of each row that shows up when the table is in focus. Clicking on it will select the entire row.'
+  }
+});
+class RowControlsComponent extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "clearHoverSelection", () => {
+      const {
+        state,
+        dispatch
+      } = this.props.editorView;
+      clearHoverSelection()(state, dispatch);
+    });
+  }
+  render() {
+    const {
+      editorView,
+      tableRef,
+      hoveredRows,
+      isInDanger,
+      isResizing,
+      intl: {
+        formatMessage
+      }
+    } = this.props;
+    if (!tableRef) {
+      return null;
+    }
+    const {
+      selection
+    } = editorView.state;
+    const rowHeights = getRowHeights(tableRef);
+    const rowsParams = getRowsParams(rowHeights);
+    const firstRow = tableRef.querySelector('tr');
+    const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
+    return /*#__PURE__*/React.createElement("div", {
+      className: ClassName.ROW_CONTROLS
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ClassName.ROW_CONTROLS_INNER
+    }, rowsParams.map(({
+      startIndex,
+      endIndex,
+      height
+    }, index) => {
+      // if previous row was header row, add its height to our margin
+      let marginTop = -1;
+      if (index === 1 && hasHeaderRow && this.props.stickyTop !== undefined) {
+        marginTop += rowHeights[index - 1] + tableToolbarSize;
+      }
+      const thisRowSticky = this.props.stickyTop !== undefined && index === 0 && hasHeaderRow;
+      return /*#__PURE__*/React.createElement("div", {
+        className: `${ClassName.ROW_CONTROLS_BUTTON_WRAP} ${getRowClassNames(startIndex, selection, hoveredRows, isInDanger, isResizing)} ${thisRowSticky ? 'sticky' : ''}`,
+        key: startIndex,
+        style: {
+          height: height,
+          marginTop: `${marginTop}px`,
+          top: thisRowSticky ? `${this.props.stickyTop + 3}px` : undefined,
+          paddingTop: thisRowSticky ? `${tableControlsSpacing}px` : undefined
+        }
+      }, /*#__PURE__*/React.createElement("button", {
+        "aria-label": formatMessage(messages.rowControl),
+        type: "button",
+        className: `${ClassName.ROW_CONTROLS_BUTTON} ${ClassName.CONTROLS_BUTTON}`,
+        onClick: event => this.props.selectRow(startIndex, event.shiftKey),
+        onMouseOver: () => this.props.hoverRows([startIndex]),
+        onMouseOut: this.clearHoverSelection,
+        "data-start-index": startIndex,
+        "data-end-index": endIndex
+      }), /*#__PURE__*/React.createElement("div", {
+        className: ClassName.CONTROLS_INSERT_MARKER
+      }));
+    })));
+  }
+}
+export const RowControls = injectIntl(RowControlsComponent);

package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { injectIntl } from 'react-intl-next';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { TableCssClassName as ClassName } from '../../../types';
+import { getRowHeights } from '../../../utils';
+import { DragHandle } from '../../DragHandle';
+const DragControlsComponent = ({
+  tableRef,
+  hoveredCell,
+  hoverRows,
+  selectRow,
+  tableActive,
+  editorView
+}) => {
+  const rowHeights = getRowHeights(tableRef);
+  const heights = rowHeights.map(height => `${height - 1}px`).join(' ');
+  const onClick = (index, event) => {};
+  const onMouseOver = () => {};
+  const onMouseOut = () => {};
+  const rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
+  const getLocalId = () => {
+    var _tableNode$node, _tableNode$node$attrs;
+    const tableNode = findTable(editorView.state.selection);
+    return (tableNode === null || tableNode === void 0 ? void 0 : (_tableNode$node = tableNode.node) === null || _tableNode$node === void 0 ? void 0 : (_tableNode$node$attrs = _tableNode$node.attrs) === null || _tableNode$node$attrs === void 0 ? void 0 : _tableNode$node$attrs.localId) || '';
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: ClassName.ROW_CONTROLS_WITH_DRAG,
+    style: {
+      gridTemplateRows: heights
+    }
+  }, Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      gridRow: `${rowIndex + 1} / span 1`
+    }
+  }, /*#__PURE__*/React.createElement(DragHandle, {
+    onClick: event => onClick(rowIndex, event),
+    onMouseOver: onMouseOver,
+    onMouseOut: onMouseOut,
+    tableLocalId: getLocalId(),
+    indexes: []
+  })));
+};
+export const DragControls = injectIntl(DragControlsComponent);

package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/index.js

@@ -1,88 +1,2 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component } from 'react';
-import { defineMessages, injectIntl } from 'react-intl-next';
-import { clearHoverSelection } from '../../../commands';
-import { TableCssClassName as ClassName } from '../../../types';
-import { getRowClassNames, getRowHeights, getRowsParams } from '../../../utils';
-import { tableControlsSpacing, tableToolbarSize } from '../../consts';
-const messages = defineMessages({
-  rowControl: {
-    id: 'fabric.editor.rowControl',
-    defaultMessage: 'Highlight row',
-    description: 'A button on the left of each row that shows up when the table is in focus. Clicking on it will select the entire row.'
-  }
-});
-class RowControlsComponent extends Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "clearHoverSelection", () => {
-      const {
-        state,
-        dispatch
-      } = this.props.editorView;
-      clearHoverSelection()(state, dispatch);
-    });
-  }
-  render() {
-    const {
-      editorView,
-      tableRef,
-      hoveredRows,
-      isInDanger,
-      isResizing,
-      intl: {
-        formatMessage
-      }
-    } = this.props;
-    if (!tableRef) {
-      return null;
-    }
-    const {
-      selection
-    } = editorView.state;
-    const rowHeights = getRowHeights(tableRef);
-    const rowsParams = getRowsParams(rowHeights);
-    const firstRow = tableRef.querySelector('tr');
-    const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
-    return /*#__PURE__*/React.createElement("div", {
-      className: ClassName.ROW_CONTROLS
-    }, /*#__PURE__*/React.createElement("div", {
-      className: ClassName.ROW_CONTROLS_INNER
-    }, rowsParams.map(({
-      startIndex,
-      endIndex,
-      height
-    }, index) => {
-      // if previous row was header row, add its height to our margin
-      let marginTop = -1;
-      if (index === 1 && hasHeaderRow && this.props.stickyTop !== undefined) {
-        marginTop += rowHeights[index - 1] + tableToolbarSize;
-      }
-      const thisRowSticky = this.props.stickyTop !== undefined && index === 0 && hasHeaderRow;
-      return /*#__PURE__*/React.createElement("div", {
-        className: `${ClassName.ROW_CONTROLS_BUTTON_WRAP} ${getRowClassNames(startIndex, selection, hoveredRows, isInDanger, isResizing)} ${thisRowSticky ? 'sticky' : ''}`,
-        key: startIndex,
-        style: {
-          height: height,
-          marginTop: `${marginTop}px`,
-          top: thisRowSticky ? `${this.props.stickyTop + 3}px` : undefined,
-          paddingTop: thisRowSticky ? `${tableControlsSpacing}px` : undefined
-        }
-      }, /*#__PURE__*/React.createElement("button", {
-        "aria-label": formatMessage(messages.rowControl),
-        type: "button",
-        className: `${ClassName.ROW_CONTROLS_BUTTON}
-                  ${ClassName.CONTROLS_BUTTON}
-                `,
-        onClick: event => this.props.selectRow(startIndex, event.shiftKey),
-        onMouseOver: () => this.props.hoverRows([startIndex]),
-        onMouseOut: this.clearHoverSelection,
-        "data-start-index": startIndex,
-        "data-end-index": endIndex
-      }), /*#__PURE__*/React.createElement("div", {
-        className: ClassName.CONTROLS_INSERT_MARKER
-      }));
-    })));
-  }
-}
-export const RowControls = injectIntl(RowControlsComponent);
+export { RowControls } from './ClassicControls';
+export { DragControls } from './DragControls';

package/dist/es2019/plugins/table/ui/TableFloatingControls/index.js

@@ -5,7 +5,7 @@ import { hoverRows, selectRow } from '../../commands';
 import { isSelectionUpdated } from '../../utils';
 import { CornerControls } from './CornerControls';
 import NumberColumn from './NumberColumn';
-import { RowControls } from './RowControls';
+import { DragControls, RowControls } from './RowControls';
 export default class TableFloatingControls extends Component {
   constructor(...args) {
     super(...args);
@@ -71,11 +71,12 @@ export default class TableFloatingControls extends Component {
       isHeaderColumnEnabled,
       ordering,
       headerRowHeight,
-      stickyHeader
+      stickyHeader,
+      hoveredCell
     } = this.props;
     const tableHeight = (_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.tableHeight;
     const nextTableHeight = nextState === null || nextState === void 0 ? void 0 : nextState.tableHeight;
-    return ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableHeight !== nextTableHeight || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader;
+    return ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableHeight !== nextTableHeight || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell;
   }
   componentWillUnmount() {
     if (this.resizeObserver) {
@@ -94,7 +95,9 @@ export default class TableFloatingControls extends Component {
       tableActive,
       hasHeaderRow,
       hoveredRows,
-      stickyHeader
+      stickyHeader,
+      isDragAndDropEnabled,
+      hoveredCell
     } = this.props;
     if (!tableRef) {
       return null;
@@ -112,8 +115,15 @@ export default class TableFloatingControls extends Component {
       isInDanger: isInDanger,
       isResizing: isResizing,
       selectRow: this.selectRow,
-      stickyTop: stickyTop
-    }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
+      stickyTop: stickyTop,
+      isDragAndDropEnabled: isDragAndDropEnabled
+    }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(DragControls, {
+      tableRef: tableRef,
+      hoveredCell: hoveredCell,
+      editorView: editorView,
+      hoverRows: this.hoverRows,
+      selectRow: this.selectRow
+    }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,
@@ -131,7 +141,7 @@ export default class TableFloatingControls extends Component {
       isResizing: isResizing,
       selectRow: this.selectRow,
       stickyTop: tableActive ? stickyTop : undefined
-    })));
+    }))));
   }
 }
 _defineProperty(TableFloatingControls, "displayName", 'TableFloatingControls');

package/dist/es2019/plugins/table/ui/common-styles.js

@@ -6,7 +6,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
-import { columnControlsDecorationHeight, resizeHandlerAreaWidth, resizeLineWidth, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableBorderColor, tableBorderDeleteColor, tableBorderRadiusSize, tableBorderSelectedColor, tableCellBackgroundColor, tableCellDeleteColor, tableCellSelectedColor, tableControlsSpacing, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tablePadding, tableScrollbarOffset, tableTextColor, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
+import { columnControlsDecorationHeight, resizeHandlerAreaWidth, resizeLineWidth, rowControlsZIndex, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableBorderColor, tableBorderDeleteColor, tableBorderRadiusSize, tableBorderSelectedColor, tableCellBackgroundColor, tableCellDeleteColor, tableCellSelectedColor, tableControlsSpacing, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tablePadding, tableScrollbarOffset, tableTextColor, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
 import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle } from './ui-styles';
 const cornerControlHeight = tableToolbarSize + 1;
 
@@ -158,6 +158,23 @@ const tableStickyHeaderColumnControlsDecorationsStyle = props => {
     `;
   }
 };
+const tableRowControlStyles = () => {
+  return getBooleanFF('platform.editor.table.drag-and-drop') ? css`
+        .${ClassName.ROW_CONTROLS_WRAPPER} {
+          position: absolute;
+          margin-top: ${tableMarginTop}px;
+          left: -${tableToolbarSize + 1}px;
+          z-index: ${rowControlsZIndex};
+        }
+      ` : css`
+        .${ClassName.ROW_CONTROLS_WRAPPER} {
+          position: absolute;
+          /* top of corner control is table margin top - corner control height + 1 pixel of table border. */
+          top: ${tableMarginTop - cornerControlHeight + 1}px;
+          left: -${tableToolbarSize}px;
+        }
+      `;
+};
 const tableWrapperStyles = () => {
   if (getBooleanFF('platform.editor.custom-table-width')) {
     return css`
@@ -584,6 +601,12 @@ export const tableStyles = props => {
       `)}
     }
 
+    .${ClassName.ROW_CONTROLS_WITH_DRAG} {
+      display: grid;
+      align-items: center;
+      position: absolute;
+    }
+
     ${floatingColumnControls(props)}
 
     :not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
@@ -596,7 +619,7 @@ export const tableStyles = props => {
       position: relative;
       float: right;
       margin-left: ${getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize : akEditorTableToolbarSize - 1}px;
-      top: ${akEditorTableToolbarSize}px;
+      top: ${getBooleanFF('platform.editor.table.drag-and-drop') ? 0 : akEditorTableToolbarSize}px;
       width: ${akEditorTableNumberColumnWidth + 1}px;
       box-sizing: border-box;
     }
@@ -622,6 +645,21 @@ export const tableStyles = props => {
       }
     }
 
+    // add a background above the first numbered column cell when sticky header is engaged
+    // which hides the table when scrolling
+    .${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}:first-of-type::after {
+      content: '';
+      display: block;
+      height: 33px;
+      width: 100%;
+      background-color: ${"var(--ds-surface, white)"};
+      position: absolute;
+
+      // the extra pixel is accounting for borders
+      top: -34px;
+      left: -1px;
+    }
+
     .${ClassName.WITH_CONTROLS} {
       .${ClassName.CORNER_CONTROLS}, .${ClassName.ROW_CONTROLS} {
         display: block;
@@ -644,10 +682,10 @@ export const tableStyles = props => {
       }
     }
     :not(.${ClassName.IS_RESIZING}) .${ClassName.WITH_CONTROLS} {
-      .${ClassName.NUMBERED_COLUMN_BUTTON} {
+      .${ClassName.NUMBERED_COLUMN_BUTTON}:not(.${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}) {
         cursor: pointer;
       }
-      .${ClassName.NUMBERED_COLUMN_BUTTON}:hover {
+      .${ClassName.NUMBERED_COLUMN_BUTTON}:not(.${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}):hover {
         border-bottom: 1px solid ${tableBorderSelectedColor(props)};
         border-color: ${tableBorderSelectedColor(props)};
         background-color: ${tableToolbarSelectedColor(props)};
@@ -683,6 +721,10 @@ export const tableStyles = props => {
         margin-top: 0;
       }
 
+      .${ClassName.COLUMN_CONTROLS_DECORATIONS_WITH_DRAG} + * {
+        margin-top: 0;
+      }
+
       /*
        * Headings have a top margin by default, but we don't want this on the
        * first heading within table header cells.
@@ -756,17 +798,10 @@ export const tableStyles = props => {
         }
       }
     }
-    .${ClassName.ROW_CONTROLS_WRAPPER} {
-      position: absolute;
-      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */
-      top: ${tableMarginTop - cornerControlHeight + 1}px;
-    }
+    ${tableRowControlStyles()}
     .${ClassName.ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW} {
       z-index: ${akEditorUnitZIndex};
     }
-    .${ClassName.ROW_CONTROLS_WRAPPER} {
-      left: -${tableToolbarSize}px;
-    }
 
     .${ClassName.COLUMN_CONTROLS_WRAPPER} {
       position: absolute;

package/dist/es2019/plugins/table/ui/consts.js

@@ -88,6 +88,7 @@ export const lineMarkerSize = 4;
 export const columnControlsDecorationHeight = 25;
 export const columnControlsZIndex = akEditorUnitZIndex * 10;
 export const columnControlsSelectedZIndex = columnControlsZIndex + 1;
+export const rowControlsZIndex = akEditorUnitZIndex * 10;
 export const columnResizeHandleZIndex = columnControlsSelectedZIndex + 1;
 export const insertLineWidth = 3;
 export const resizeHandlerAreaWidth = RESIZE_HANDLE_AREA_DECORATION_GAP / 3;

package/dist/es2019/plugins/table/ui/ui-styles.js

@@ -300,6 +300,17 @@ export const floatingColumnControls = props => {
   `;
 };
 export const columnControlsDecoration = props => {
+  if (getBooleanFF('platform.editor.table.drag-and-drop')) {
+    return css`
+      .${ClassName.COLUMN_CONTROLS_DECORATIONS_WITH_DRAG} {
+        position: absolute;
+        // kinda a hacky way to center an element with absolute positioning inside a relative element
+        top: 25%;
+        left: 50%;
+        transform: translate(-50%, -100%);
+      }
+    `;
+  }
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return css`
       .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
@@ -564,21 +575,35 @@ const getLastColumnResizerOverrides = () => {
         }
       ` : '';
 };
-export const resizeHandle = props => css`
-  .${ClassName.TABLE_CONTAINER} {
-    .${ClassName.RESIZE_HANDLE_DECORATION} {
-      background-color: transparent;
-      position: absolute;
-      width: ${resizeHandlerAreaWidth}px;
-      height: 100%;
-      top: 0;
-      right: -${resizeHandlerAreaWidth / 2}px;
-      cursor: col-resize;
-      z-index: ${resizeHandlerZIndex};
-    }
-
-    ${getLastColumnResizerOverrides()}
+const resizeHandleOverrides = props => {
+  if (getBooleanFF('platform.editor.table.drag-and-drop')) {
+    return css`
+      th.${ClassName.WITH_RESIZE_LINE}::before,
+        td.${ClassName.WITH_RESIZE_LINE}::before {
+        content: ' ';
+        position: absolute;
+        left: ${"var(--ds-space-negative-025, -2px)"};
+        top: -1px;
+        width: ${resizeLineWidth}px;
+        height: calc(100% + 2px);
+        background-color: ${tableBorderSelectedColor(props)};
+        z-index: ${columnControlsZIndex * 2};
+      }
 
+      th.${ClassName.WITH_RESIZE_LINE_LAST_COLUMN}::before,
+        td.${ClassName.WITH_RESIZE_LINE_LAST_COLUMN}::before {
+        content: ' ';
+        position: absolute;
+        right: -1px;
+        top: -1px;
+        width: ${resizeLineWidth}px;
+        height: calc(100% + 2px);
+        background-color: ${tableBorderSelectedColor(props)};
+        z-index: ${columnControlsZIndex * 2};
+      }
+    `;
+  }
+  return css`
     td.${ClassName.WITH_RESIZE_LINE}::before {
       content: ' ';
       position: absolute;
@@ -622,6 +647,24 @@ export const resizeHandle = props => css`
       z-index: ${columnControlsZIndex * 2};
       top: -${tableToolbarSize + tableCellBorderWidth}px;
     }
+  `;
+};
+export const resizeHandle = props => css`
+  .${ClassName.TABLE_CONTAINER} {
+    .${ClassName.RESIZE_HANDLE_DECORATION} {
+      background-color: transparent;
+      position: absolute;
+      width: ${resizeHandlerAreaWidth}px;
+      height: 100%;
+      top: 0;
+      right: -${resizeHandlerAreaWidth / 2}px;
+      cursor: col-resize;
+      z-index: ${resizeHandlerZIndex};
+    }
+
+    ${getLastColumnResizerOverrides()}
+
+    ${resizeHandleOverrides(props)}
 
     table
       tr:first-of-type