fix DataTable row reorder not working #3046 (#3050)

Co-authored-by: Saulo Dias <[email protected]>
primefaces · Jul 15, 2022 · 5c82a32 · 5c82a32
1 parent 195bca1
commit 5c82a32
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>