Row Drag and Drop in React Grid component

import * as React from 'react';
import { Target } from './DestGrid';
import { Source } from './SourceGrid';
export default class App extends React.Component {
    render() {
        return (<div>
          <Source />
          <Target />
         </div>);
    }
}

import { GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { ColumnDirective, ColumnsDirective, RowDD, Selection } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
export class Target extends React.Component {
    constructor() {
        super(...arguments);
        this.data = [];
        this.rowDropSettings = { targetID: 'Grid' };
        this.selectionSettings = { type: 'Multiple' };
    }
    render() {
        return <GridComponent id="DestGrid" dataSource={this.data} allowRowDragAndDrop={true} rowDropSettings={this.rowDropSettings} selectionSettings={this.selectionSettings}>
                <Inject services={[RowDD, Selection]}/>
                <ColumnsDirective>
                 <ColumnDirective field='OrderID' width='120' textAlign="Right"/>
                 <ColumnDirective field='CustomerID' width='150'/>
                 <ColumnDirective field='ShipCity' width='100'/>
                 <ColumnDirective field='ShipName' width='150'/>
                </ColumnsDirective>
               </GridComponent>;
    }
}

import { GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { ColumnDirective, ColumnsDirective, RowDD, Selection } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
export class Source extends React.Component {
    constructor() {
        super(...arguments);
        this.data = data.slice(0, 5);
        this.rowDropSettings = { targetID: 'DestGrid' };
        this.selectionSettings = { type: 'Multiple' };
        this.style = { marginBottom: '20px' };
    }
    render() {
        return <GridComponent id="Grid" dataSource={this.data} allowRowDragAndDrop={true} rowDropSettings={this.rowDropSettings} selectionSettings={this.selectionSettings} style={this.style}>
                <Inject services={[RowDD, Selection]}/>
                <ColumnsDirective>
                 <ColumnDirective field='OrderID' width='120' textAlign="Right"/>
                 <ColumnDirective field='CustomerID' width='150'/>
                 <ColumnDirective field='ShipCity' width='100'/>
                 <ColumnDirective field='ShipName' width='150'/>
                </ColumnsDirective>
               </GridComponent>;
    }
}

import * as React from 'react';
import { Target } from './DestGrid';
import { Source } from './SourceGrid';

export default class App extends React.Component<{}, {}>{
  public render () {
    return (<div>
          <Source/>
          <Target/>
         </div>)
  }
}

import { GridComponent, Inject, RowDropSettingsModel, SelectionSettingsModel } from '@syncfusion/ej2-react-grids';
import { ColumnDirective, ColumnsDirective, RowDD, Selection } from '@syncfusion/ej2-react-grids';
import * as React from 'react';

export class Target extends React.Component<{}, {}>{
    public data: object[] = [];
    public rowDropSettings: RowDropSettingsModel = { targetID: 'Grid' };
    public selectionSettings: SelectionSettingsModel = { type: 'Multiple' };
    public render() {
        return <GridComponent id="DestGrid" dataSource={this.data} allowRowDragAndDrop={true} 
                rowDropSettings={this.rowDropSettings} selectionSettings={this.selectionSettings}>
                <Inject services={[RowDD, Selection]}/>
                <ColumnsDirective>
                 <ColumnDirective field='OrderID' width='120' textAlign="Right"/>
                 <ColumnDirective field='CustomerID' width='150'/>
                 <ColumnDirective field='ShipCity' width='100'/>
                 <ColumnDirective field='ShipName' width='150'/>
                </ColumnsDirective>
               </GridComponent>
    }
  }

import { GridComponent, Inject, RowDropSettingsModel, SelectionSettingsModel } from '@syncfusion/ej2-react-grids';
import { ColumnDirective, ColumnsDirective, RowDD, Selection } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';

export class Source extends React.Component<{}, {}>{
    public data: object[] = data.slice(0, 5);
    public rowDropSettings: RowDropSettingsModel = { targetID: 'DestGrid' };
    public selectionSettings: SelectionSettingsModel = { type: 'Multiple' };
    public style = { marginBottom: '20px' };
    public render() {
        return <GridComponent id="Grid" dataSource={this.data} allowRowDragAndDrop={true} 
        rowDropSettings={this.rowDropSettings} selectionSettings={this.selectionSettings} style={this.style}>
                <Inject services={[RowDD, Selection]}/>
                <ColumnsDirective>
                 <ColumnDirective field='OrderID' width='120' textAlign="Right"/>
                 <ColumnDirective field='CustomerID' width='150'/>
                 <ColumnDirective field='ShipCity' width='100'/>
                 <ColumnDirective field='ShipName' width='150'/>
                </ColumnsDirective>
               </GridComponent>
    }
  }