From 5c82a327f9c5bba0bd30b70efd573e3dc0470b4c Mon Sep 17 00:00:00 2001
From: Saulo Dias <35342506+saulodias@users.noreply.github.com>
Date: Fri, 15 Jul 2022 18:39:19 -0300
Subject: [PATCH] fix DataTable row reorder not working #3046 (#3050)

Co-authored-by: Saulo Dias <saulo.dias@radixeng.com>
---
 api-generator/components/datatable.js   |  6 ++++++
 components/doc/datatable/index.js       |  6 ++++++
 components/lib/datatable/DataTable.d.ts |  1 +
 components/lib/datatable/DataTable.js   |  5 +++--
 components/lib/datatable/TableBody.js   |  2 +-
 pages/datatable/reorder.js              | 10 +++++-----
 6 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/api-generator/components/datatable.js b/api-generator/components/datatable.js
index 81b69eaac9..0c815afa34 100644
--- a/api-generator/components/datatable.js
+++ b/api-generator/components/datatable.js
@@ -293,6 +293,12 @@ const DataTableProps = [
         default: 'false',
         description: 'When enabled, columns can be reordered using drag and drop.'
     },
+    {
+        name: 'reorderableRows',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, rows can be reordered using drag and drop.'
+    },
     {
         name: 'filters',
         type: 'array',
diff --git a/components/doc/datatable/index.js b/components/doc/datatable/index.js
index d46f6d0fe6..9bc252c6b1 100644
--- a/components/doc/datatable/index.js
+++ b/components/doc/datatable/index.js
@@ -3212,6 +3212,12 @@ export const DataTableStateDemo = () => {
                                     <td>false</td>
                                     <td>When enabled, columns can be reordered using drag and drop.</td>
                                 </tr>
+                                <tr>
+                                    <td>reorderableRows</td>
+                                    <td>boolean</td>
+                                    <td>false</td>
+                                    <td>When enabled, rows can be reordered using drag and drop.</td>
+                                </tr>
                                 <tr>
                                     <td>filters</td>
                                     <td>array</td>
diff --git a/components/lib/datatable/DataTable.d.ts b/components/lib/datatable/DataTable.d.ts
index af48138a57..a505ba1423 100644
--- a/components/lib/datatable/DataTable.d.ts
+++ b/components/lib/datatable/DataTable.d.ts
@@ -282,6 +282,7 @@ export interface DataTableProps extends Omit<React.DetailedHTMLProps<React.Input
     resizableColumns?: boolean;
     columnResizeMode?: DataTableColumnResizeModeType;
     reorderableColumns?: boolean;
+    reorderableRows?: boolean;
     filters?: DataTableFilterMeta;
     globalFilter?: DataTableGlobalFilterType;
     filterDelay?: number;
diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
index 21f5d2c290..339402e422 100644
--- a/components/lib/datatable/DataTable.js
+++ b/components/lib/datatable/DataTable.js
@@ -1394,7 +1394,7 @@ export const DataTable = React.forwardRef((props, ref) => {
                 dragSelection={props.dragSelection} onContextMenu={props.onContextMenu} onContextMenuSelectionChange={props.onContextMenuSelectionChange}
                 metaKeySelection={props.metaKeySelection} selectionMode={props.selectionMode} cellSelection={props.cellSelection} contextMenuSelection={props.contextMenuSelection}
                 dataKey={props.dataKey} expandedRows={props.expandedRows} onRowCollapse={props.onRowCollapse} onRowExpand={props.onRowExpand} onRowToggle={props.onRowToggle}
-                editMode={props.editMode} editingRows={props.editingRows} onRowReorder={props.onRowReorder} scrollable={props.scrollable} rowGroupMode={props.rowGroupMode}
+                editMode={props.editMode} editingRows={props.editingRows} onRowReorder={props.onRowReorder} reorderableRows={props.reorderableRows} scrollable={props.scrollable} rowGroupMode={props.rowGroupMode}
                 groupRowsBy={props.groupRowsBy} expandableRowGroups={props.expandableRowGroups} loading={props.loading} emptyMessage={props.emptyMessage}
                 rowGroupHeaderTemplate={props.rowGroupHeaderTemplate} rowExpansionTemplate={props.rowExpansionTemplate} rowGroupFooterTemplate={props.rowGroupFooterTemplate}
                 onRowEditChange={props.onRowEditChange} compareSelectionBy={props.compareSelectionBy} selectOnEdit={props.selectOnEdit}
@@ -1414,7 +1414,7 @@ export const DataTable = React.forwardRef((props, ref) => {
                 dragSelection={props.dragSelection} onContextMenu={props.onContextMenu} onContextMenuSelectionChange={props.onContextMenuSelectionChange}
                 metaKeySelection={props.metaKeySelection} selectionMode={props.selectionMode} cellSelection={props.cellSelection} contextMenuSelection={props.contextMenuSelection}
                 dataKey={props.dataKey} expandedRows={props.expandedRows} onRowCollapse={props.onRowCollapse} onRowExpand={props.onRowExpand} onRowToggle={props.onRowToggle}
-                editMode={props.editMode} editingRows={props.editingRows} onRowReorder={props.onRowReorder} scrollable={props.scrollable} rowGroupMode={props.rowGroupMode}
+                editMode={props.editMode} editingRows={props.editingRows} onRowReorder={props.onRowReorder} reorderableRows={props.reorderableRows} scrollable={props.scrollable} rowGroupMode={props.rowGroupMode}
                 groupRowsBy={props.groupRowsBy} expandableRowGroups={props.expandableRowGroups} loading={props.loading} emptyMessage={props.emptyMessage}
                 rowGroupHeaderTemplate={props.rowGroupHeaderTemplate} rowExpansionTemplate={props.rowExpansionTemplate} rowGroupFooterTemplate={props.rowGroupFooterTemplate}
                 onRowEditChange={props.onRowEditChange} compareSelectionBy={props.compareSelectionBy} selectOnEdit={props.selectOnEdit}
@@ -1641,6 +1641,7 @@ DataTable.defaultProps = {
     resizableColumns: false,
     columnResizeMode: 'fit',
     reorderableColumns: false,
+    reorderableRows: false,
     filters: null,
     globalFilter: null,
     filterDelay: 300,
diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js
index 8a7859e5d1..f7319c6317 100644
--- a/components/lib/datatable/TableBody.js
+++ b/components/lib/datatable/TableBody.js
@@ -116,7 +116,7 @@ export const TableBody = React.memo(React.forwardRef((props, ref) => {
     }
 
     const allowRowDrag = (event) => {
-        return !allowCellSelection() && allowDrag(event);
+        return !allowCellSelection() && allowDrag(event) || props.reorderableRows;
     }
 
     const allowCellDrag = (event) => {
diff --git a/pages/datatable/reorder.js b/pages/datatable/reorder.js
index b6826b2442..35f7295948 100644
--- a/pages/datatable/reorder.js
+++ b/pages/datatable/reorder.js
@@ -56,7 +56,7 @@ const DataTableReorderDemo = () => {
                 <Toast ref={toast}></Toast>
 
                 <div className="card">
-                    <DataTable value={products} reorderableColumns onRowReorder={onRowReorder} onColReorder={onColReorder} responsiveLayout="scroll">
+                    <DataTable value={products} reorderableColumns reorderableRows onRowReorder={onRowReorder} onColReorder={onColReorder} responsiveLayout="scroll">
                         <Column rowReorder style={{ width: '3em' }} />
                         {dynamicColumns}
                     </DataTable>
@@ -127,7 +127,7 @@ export class DataTableReorderDemo extends Component {
                 <Toast ref={(el) => { this.toast = el; }}></Toast>
 
                 <div className="card">
-                    <DataTable value={this.state.products} reorderableColumns onRowReorder={this.onRowReorder} onColReorder={this.onColReorder} responsiveLayout="scroll">
+                    <DataTable value={this.state.products} reorderableColumns reorderableRows onRowReorder={this.onRowReorder} onColReorder={this.onColReorder} responsiveLayout="scroll">
                         <Column rowReorder style={{width: '3em'}} />
                         {dynamicColumns}
                     </DataTable>
@@ -181,7 +181,7 @@ const DataTableReorderDemo = () => {
             <Toast ref={toast}></Toast>
 
             <div className="card">
-                <DataTable value={products} reorderableColumns onRowReorder={onRowReorder} onColReorder={onColReorder} responsiveLayout="scroll">
+                <DataTable value={products} reorderableColumns reorderableRows onRowReorder={onRowReorder} onColReorder={onColReorder} responsiveLayout="scroll">
                     <Column rowReorder style={{width: '3em'}} />
                     {dynamicColumns}
                 </DataTable>
@@ -241,7 +241,7 @@ const DataTableReorderDemo = () => {
             <Toast ref={toast}></Toast>
 
             <div className="card">
-                <DataTable value={products} reorderableColumns onRowReorder={onRowReorder} onColReorder={onColReorder} responsiveLayout="scroll">
+                <DataTable value={products} reorderableColumns reorderableRows onRowReorder={onRowReorder} onColReorder={onColReorder} responsiveLayout="scroll">
                     <Column rowReorder style={{width: '3em'}} />
                     {dynamicColumns}
                 </DataTable>
@@ -309,7 +309,7 @@ const DataTableReorderDemo = () => {
             <Toast ref={toast}></Toast>
 
             <div className="card">
-                <DataTable value={products} reorderableColumns onRowReorder={onRowReorder} onColReorder={onColReorder} responsiveLayout="scroll">
+                <DataTable value={products} reorderableColumns reorderableRows onRowReorder={onRowReorder} onColReorder={onColReorder} responsiveLayout="scroll">
                     <Column rowReorder style={{width: '3em'}} />
                     {dynamicColumns}
                 </DataTable>