title: React/AntDesign How to make rows draggable? (Table Drag Sorting)
body: <p>I have been coding this simple one-column drag and drop table, but the rows aren´t moving when I drag them. Where do I fix or check that?</p>
  
  <p>I'm using React, AntDesign and JavaScript (with TypeScript)</p>
  
  <pre><code>import * as React from 'react';
  
  import ReactDOM from "react-dom";
  
  import { Table } from "antd";
  
  import { DndProvider, DragSource, DropTarget } from "react-dnd";
  
  import HTML5Backend from "react-dnd-html5-backend";
  
  import update from "immutability-helper";
  
  let dragingIndex = -1;
  
  interface propsDD {
      isOver: any,
      connectDragSource: any,
      connectDropTarget: any,
      moveRow: any,
      restProps: {
          readonly [x: string]: any;
          children?: React.ReactNode;
      }
      className: any,
      index: any,
  }
  
  class BodyRow extends React.Component&lt;propsDD&gt;{
      render() {
          const { isOver, connectDragSource, connectDropTarget, moveRow, ...restProps } = this.props;
          const style = { ...restProps, cursor: 'move' };
          let { className } = restProps;
          if (isOver) {
              if (restProps.index &gt; dragingIndex) {
                  className += " drop-over-downward";
              }
              if (restProps.index &lt; dragingIndex) {
                  className += " drop-over-upward";
              }
          }
          return connectDragSource(
              connectDropTarget(
                  &lt;tr {...restProps} className={className} style={style} /&gt;
              )
          );
      }
  }
  
  const rowSource = {
      beginDrag(props: any) {
          dragingIndex = props.index;
          return {
              index: props.index,
          };
      },
  };
  
  const rowTarget = {
      drop(props: any, monitor: any) {
          const dragIndex = monitor.getItem().index;
          const hoverIndex = props.index;
          if (dragIndex === hoverIndex) {
              return;
          }
          props.moveRow(dragIndex, hoverIndex);
          monitor.getItem().index = hoverIndex;
      },
  };
  
  const DragableBodyRow = DropTarget("row", rowTarget, (connect, monitor) =&gt; ({
      connectDropTarget: connect.dropTarget(),
      isOver: monitor.isOver()
  }))(
      DragSource("row", rowSource, connect =&gt; ({
          connectDragSource: connect.dragSource()
      }))(BodyRow)
  );
  
  const columns = [
      {
          title: 'Orden de Ejecución',
          dataIndex: 'attributes.name',
          key: 'name',
      },
  ];
  
  type propsFromList = {
      receivedTasks: Task[],
      onReceivedTasks: (tasks: Task[]) =&gt; void,
  }
  
  export default class DDTasks extends React.Component&lt;propsFromList, State&gt;{
      public state: State = {
          data: [],
      };
  
      components = {
          body: {
              row: DragableBodyRow,
          },
      };
  
      onReceivedTasks(tasks: Task[]): void {
          this.setState({
              data: this.props.receivedTasks,
          } as State)
      }
  
      moveRow = (dragIndex: any, hoverIndex: any) =&gt; {
          const { data } = this.state;
          const dragRow = data[dragIndex];
          this.setState(
              update(this.state, {
                  data: {
                      $splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]]
                  }
              })
          );
      };
  
      render() {
          return (
              &lt; DndProvider backend={HTML5Backend} &gt;
                  &lt;Table
                      rowKey="id"
                      bordered={true}
                      pagination={false}
                      columns={columns}
                      dataSource={this.props.receivedTasks}
                      components={this.components}
                      onRow={(index) =&gt; ({
                          index,
                          moveRow: this.moveRow,
                      })}
                  /&gt;
              &lt;/DndProvider &gt;
          );
      }
  }
  </code></pre>
  
  <p>I expect to drag rows. The content of the rows are actually displayed.</p>