dragOverHandler = (e: any) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';

    const isDraggable = e.target.classList.contains(
      'ruiTable__row__col--draggable'
    );

    const lastPinnedCol = e.target.parentNode.querySelector(
      '.last-pinned-col'
    );

    const isHiddenByPinnedCol = lastPinnedCol
      ? lastPinnedCol.getBoundingClientRect().right >
        e.target.getBoundingClientRect().left
      : false;

    if (isHiddenByPinnedCol) {
      return null;
    }
  };
  …
  render() {
    return (
      <tr
        onDragOver={this.dragOverHandler}
        onDrop={this.dropHandler}>
       …
     )
   }

class TableRowCell extends React.Component<Props> {
      dragStartHandler = (e: any) => {
        ...
      };

      dragLeaveHandler = (e: SyntheticDragEvent<HTMLTableCellElement>) => {
        const { dragHandlers } = this.props;
        e.preventDefault();
        cleanDraggedClasses(e);

        if (dragHandlers && dragHandlers.dragLeaveHandler)
          dragHandlers.dragLeaveHandler();
      };

      dragEndHandler = (e: any) => {
        ...
      };

      render() {
        return (
          <th
            className={this.cssClassName()}
            draggable={true}
            onDragLeave={this.dragLeaveHandler}
            onDragStart={this.dragStartHandler}
            onDragEnd={this.dragEndHandler}
          >
            ...
          </th>
        );
      }
    }

    export default TableRowCell;