Row reordering for Table

primefaces · Mar 12, 2018 · 8bd2739 · 8bd2739
1 parent 9506910
commit 8bd2739
Show file tree

Hide file tree

Showing 11 changed files with 168 additions and 16 deletions.
diff --git a/public/index.html b/public/index.html
@@ -2,14 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <link id="theme-link" rel="stylesheet" href="%PUBLIC_URL%/resources/themes/omega/theme.css">
     <link rel="stylesheet" href="%PUBLIC_URL%/resources/primereact.min.css">
     <script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
     <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyA6Ar0UymhiklJBzEPLKKn2QHwbjdz3XV0" async defer></script>
-
     <title>PrimeReact</title>
     <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

diff --git a/public/resources/themes/_theme.scss b/public/resources/themes/_theme.scss
@@ -340,6 +340,15 @@
     }
 }
 
+/* Row Reorder */
+.ui-datatable .ui-datatable-data > tr.ui-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 $stateHighlightBgColor;
+}
+
+.ui-datatable .ui-datatable-data > tr.ui-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 $stateHighlightBgColor;
+}
+
 .ui-orderlist {
     .ui-orderlist-item:not(.ui-state-highlight):hover {
         @include hover-element();

diff --git a/src/App.js b/src/App.js
@@ -64,7 +64,7 @@ import { DataTableSelectionDemo } from './showcase/datatable/DataTableSelectionD
 import { DataTableColGroupDemo } from './showcase/datatable/DataTableColGroupDemo';
 import { DataTableRowExpansionDemo } from './showcase/datatable/DataTableRowExpansionDemo';
 import { DataTableColResizeDemo } from './showcase/datatable/DataTableColResizeDemo';
-import { DataTableColReorderDemo } from './showcase/datatable/DataTableColReorderDemo';
+import { DataTableReorderDemo } from './showcase/datatable/DataTableReorderDemo';
 import { DataTableContextMenuDemo } from './showcase/datatable/DataTableContextMenuDemo';
 import { DataTableResponsiveDemo } from './showcase/datatable/DataTableResponsiveDemo';
 import { DataTableEditDemo } from './showcase/datatable/DataTableEditDemo';
@@ -487,7 +487,7 @@ class App extends Component {
                     <Route path="/datatable/rowexpand" component={DataTableRowExpansionDemo} />
                     <Route path="/datatable/responsive" component={DataTableResponsiveDemo} />
                     <Route path="/datatable/colresize" component={DataTableColResizeDemo} />
-                    <Route path="/datatable/colreorder" component={DataTableColReorderDemo} />
+                    <Route path="/datatable/reorder" component={DataTableReorderDemo} />
                     <Route path="/datatable/export" component={DataTableExportDemo} />
                     <Route path="/datatable/edit" component={DataTableEditDemo} />
                     <Route path="/datatable/rowgroup" component={DataTableRowGroupDemo} />

diff --git a/src/components/column/Column.js b/src/components/column/Column.js
@@ -26,7 +26,8 @@ export class Column extends Component {
         colSpan: null,
         rowSpan: null,
         editor: null,
-        editorValidator: null
+        editorValidator: null,
+        reorder: false
     }
 
     static propsTypes = {
@@ -52,6 +53,7 @@ export class Column extends Component {
         colSpan: PropTypes.number,
         rowSpan: PropTypes.number,
         editor: PropTypes.func,
-        editorValidator: PropTypes.func
+        editorValidator: PropTypes.func,
+        reorder: PropTypes.bool 
     }
 }
diff --git a/src/components/datatable/BodyCell.js b/src/components/datatable/BodyCell.js
@@ -129,6 +129,11 @@ export class BodyCell extends Component {
             else
                 content = <RowCheckbox onClick={this.props.onCheckboxClick} rowData={this.props.rowData} selected={this.props.selected}/>;
         }
+        else if(this.props.reorder) {
+            content = (
+                <i className="fa fa-bars ui-table-reorderablerow-handle"></i>
+            );
+        }
         else {
             if(this.state.editing) {
                 if(this.props.editor)

diff --git a/src/components/datatable/BodyRow.js b/src/components/datatable/BodyRow.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import {BodyCell} from './BodyCell';
+import DomHandler from '../utils/DomHandler';
 
 export class BodyRow extends Component {
 
@@ -9,6 +10,11 @@ export class BodyRow extends Component {
         this.onClick = this.onClick.bind(this);
         this.onTouchEnd = this.onTouchEnd.bind(this);
         this.onRightClick = this.onRightClick.bind(this);
+        this.onMouseDown = this.onMouseDown.bind(this);
+        this.onDragEnd = this.onDragEnd.bind(this);
+        this.onDragOver = this.onDragOver.bind(this);
+        this.onDragLeave = this.onDragLeave.bind(this);
+        this.onDrop = this.onDrop.bind(this);
     }
 
     onClick(event) {
@@ -37,6 +43,48 @@ export class BodyRow extends Component {
         }
     }
 
+    onMouseDown(event) {
+        if (DomHandler.hasClass(event.target, 'ui-table-reorderablerow-handle'))
+            event.currentTarget.draggable = true;
+        else
+            event.currentTarget.draggable = false;
+    }
+
+    onDragEnd(event) {
+        if(this.props.onDragEnd) {
+            this.props.onDragEnd(event);
+        }
+        event.currentTarget.draggable = false;
+    }
+
+    onDragOver(event) {
+        if(this.props.onDragOver) {
+            this.props.onDragOver({
+                originalEvent: event,
+                rowElement: this.container
+            });
+        }
+        event.preventDefault();
+    }
+
+    onDragLeave(event) {
+        if(this.props.onDragLeave) {
+            this.props.onDragLeave({
+                originalEvent: event,
+                rowElement: this.container
+            });
+        }
+    }
+
+    onDrop(event) {
+        if(this.props.onDrop) {
+            this.props.onDrop({
+                originalEvent: event,
+                rowElement: this.container
+            });
+        }
+    }
+
     render() {
         let columns = React.Children.toArray(this.props.children);
         let conditionalStyles = {'ui-state-highlight': this.props.selected, 'ui-datatable-even': (this.props.rowIndex % 2 === 0), 'ui-datatable-odd': (this.props.rowIndex % 2 === 1)};
@@ -67,7 +115,8 @@ export class BodyRow extends Component {
         }
 
         return (
-            <tr className={className} onClick={this.onClick} onTouchEnd={this.onTouchEnd} onContextMenu={this.onRightClick}>
+            <tr ref={(el) => {this.container = el;}} className={className} onClick={this.onClick} onTouchEnd={this.onTouchEnd} onContextMenu={this.onRightClick} onMouseDown={this.onMouseDown}
+                onDragStart={this.props.onDragStart} onDragEnd={this.onDragEnd} onDragOver={this.onDragOver} onDragLeave={this.onDragLeave} onDrop={this.onDrop}>
                 {cells}
             </tr>
         );

diff --git a/src/components/datatable/DataTable.css b/src/components/datatable/DataTable.css
@@ -330,6 +330,13 @@
     z-index: 2;
 }
 
+/* Reorder */
+.ui-datatable-reorder-indicator-up,
+.ui-datatable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+}
+
 @media ( max-width: 35em ) {
     .ui-datatable-reflow thead th,
     .ui-datatable-reflow tfoot td {

diff --git a/src/components/datatable/DataTable.js b/src/components/datatable/DataTable.js
@@ -84,7 +84,8 @@ export class DataTable extends Component {
         onRowExpand: null,
         onRowCollapse: null,
         onContextMenuSelect: null,
-        onColReorder: null
+        onColReorder: null,
+        onRowReorder: null
     }
 
     static propTypes = {
@@ -148,6 +149,7 @@ export class DataTable extends Component {
         rowGroupFooterTemplate: PropTypes.func,
         loading: PropTypes.bool,
         loadingIcon: PropTypes.string,
+        autoLayout: PropTypes.bool,
         onColumnResizeEnd: PropTypes.func,
         onSort: PropTypes.func,
         onPage: PropTypes.func,
@@ -160,7 +162,7 @@ export class DataTable extends Component {
         onRowCollapse: PropTypes.func,
         onContextMenuSelect: PropTypes.func,
         onColReorder: PropTypes.func,
-        autoLayout: PropTypes.bool
+        onRowReorder: PropTypes.func
     };
 
     constructor(props) {
@@ -829,7 +831,7 @@ export class DataTable extends Component {
                         onRowExpand={this.props.onRowExpand} responsive={this.props.responsive} emptyMessage={this.props.emptyMessage} 
                         contextMenu={this.props.contextMenu} onContextMenuSelect={this.props.onContextMenuSelect} virtualScroll={this.props.virtualScroll}
                         groupField={this.props.groupField} rowGroupMode={this.props.rowGroupMode} rowGroupHeaderTemplate={this.props.rowGroupHeaderTemplate} rowGroupFooterTemplate={this.props.rowGroupFooterTemplate}
-                        sortField={this.state.sortField} rowClassName={this.props.rowClassName}>
+                        sortField={this.state.sortField} rowClassName={this.props.rowClassName} onRowReorder={this.props.onRowReorder}>
                         {columns}
                 </TableBody>;
     }

diff --git a/src/components/datatable/TableBody.js b/src/components/datatable/TableBody.js
@@ -14,6 +14,9 @@ export class TableBody extends Component {
         this.onRowToggle = this.onRowToggle.bind(this);
         this.onRadioClick = this.onRadioClick.bind(this);
         this.onCheckboxClick = this.onCheckboxClick.bind(this);
+        this.onRowDragEnd = this.onRowDragEnd.bind(this);
+        this.onRowDragLeave = this.onRowDragLeave.bind(this);
+        this.onRowDrop = this.onRowDrop.bind(this);
     }
 
     onRowClick(event) {
@@ -280,6 +283,79 @@ export class TableBody extends Component {
 
         return false;
     }
+
+    onRowDragStart(event, index) {
+        this.rowDragging = true;
+        this.draggedRowIndex = index;
+        event.dataTransfer.setData('text', 'b');    // For firefox
+    }
+
+    onRowDragEnd(event, index) {
+        this.rowDragging = false;
+        this.draggedRowIndex = null;
+        this.droppedRowIndex = null;
+    }
+
+    onRowDragOver(event, index) {
+        if (this.rowDragging && this.draggedRowIndex !== index) {
+            let rowElement = event.rowElement;
+            let rowY = DomHandler.getOffset(rowElement).top + DomHandler.getWindowScrollTop();
+            let pageY = event.originalEvent.pageY;
+            let rowMidY = rowY + DomHandler.getOuterHeight(rowElement) / 2;
+            let prevRowElement = rowElement.previousElementSibling;
+
+            if (pageY < rowMidY) {
+                DomHandler.removeClass(rowElement, 'ui-datatable-dragpoint-bottom');
+
+                this.droppedRowIndex = index;
+                if (prevRowElement)
+                    DomHandler.addClass(prevRowElement, 'ui-datatable-dragpoint-bottom');
+                else
+                    DomHandler.addClass(rowElement, 'ui-datatable-dragpoint-top');
+            } 
+            else {
+                if (prevRowElement)
+                    DomHandler.removeClass(prevRowElement, 'ui-datatable-dragpoint-bottom');
+                else
+                    DomHandler.addClass(rowElement, 'ui-datatable-dragpoint-top');
+
+                this.droppedRowIndex = index + 1;
+                DomHandler.addClass(rowElement, 'ui-datatable-dragpoint-bottom');
+            }
+        }
+    }
+
+    onRowDragLeave(event) {
+        let rowElement = event.rowElement;
+        let prevRowElement = rowElement.previousElementSibling;
+        if (prevRowElement) {
+            DomHandler.removeClass(prevRowElement, 'ui-datatable-dragpoint-bottom');
+        }
+
+        DomHandler.removeClass(rowElement, 'ui-datatable-dragpoint-bottom');
+        DomHandler.removeClass(rowElement, 'ui-datatable-dragpoint-top');
+    }
+
+    onRowDrop(event) {
+        if (this.droppedRowIndex != null) {
+            let dropIndex = (this.draggedRowIndex > this.droppedRowIndex) ? this.droppedRowIndex : (this.droppedRowIndex === 0) ? 0 : this.droppedRowIndex - 1;
+            let val = [...this.props.value];
+            ObjectUtils.reorderArray(val, this.draggedRowIndex, dropIndex);
+
+            if(this.props.onRowReorder) {
+                this.props.onRowReorder({
+                    originalEvent: event,
+                    value: val,
+                    dragIndex: this.draggedRowIndex,
+                    dropIndex: this.droppedRowIndex
+                })
+            }
+        }
+
+        //cleanup
+        this.onRowDragLeave(event);
+        this.onRowDragEnd(event);
+    }
 
     renderRowGroupHeader(rowData, index) {
         return (
@@ -362,7 +438,9 @@ export class TableBody extends Component {
                 let bodyRow = <BodyRow key={i} rowData={rowData} rowIndex={i} onClick={this.onRowClick} onRightClick={this.onRowRightClick} onTouchEnd={this.onRowTouchEnd} 
                             onRowToggle={this.onRowToggle} expanded={expanded} responsive={this.props.responsive}
                             onRadioClick={this.onRadioClick} onCheckboxClick={this.onCheckboxClick} selected={selected} rowClassName={this.props.rowClassName}
-                            sortField={this.props.sortField} rowGroupMode={this.props.rowGroupMode} groupRowSpan={groupRowSpan}>{this.props.children}</BodyRow>
+                            sortField={this.props.sortField} rowGroupMode={this.props.rowGroupMode} groupRowSpan={groupRowSpan}
+                            onDragStart={(e) => this.onRowDragStart(e, i)} onDragEnd={this.onRowDragEnd} onDragOver={(e) => this.onRowDragOver(e, i)} onDragLeave={this.onRowDragLeave}
+                            onDrop={this.onRowDrop}>{this.props.children}</BodyRow>
 
                 rows.push(bodyRow);
 

diff --git a/...case/datatable/DataTableColReorderDemo.js → ...howcase/datatable/DataTableReorderDemo.js b/...case/datatable/DataTableColReorderDemo.js → ...howcase/datatable/DataTableReorderDemo.js
@@ -6,7 +6,7 @@ import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
 import {TabView,TabPanel} from '../../components/tabview/TabView';
 import {CodeHighlight} from '../codehighlight/CodeHighlight';
 
-export class DataTableColReorderDemo extends Component {
+export class DataTableReorderDemo extends Component {
 
     constructor() {
         super();
@@ -27,13 +27,14 @@ export class DataTableColReorderDemo extends Component {
 
                 <div className="content-section introduction">
                     <div className="feature-intro">
-                        <h1>DataTable - Column Reorder</h1>
-                        <p>Columns can be reordered using drag drop by setting the reorderableColumns to true. onColReorder is a callback that is invoked when a column is reordered.</p>
+                        <h1>DataTable - Reorder</h1>
+                        <p>Order of the columns and rows can be changed using drag and drop.</p>
                     </div>
                 </div>
 
                 <div className="content-section implementation">
-                    <DataTable value={this.state.cars} reorderableColumns={true}>
+                    <DataTable value={this.state.cars} reorderableColumns={true} reorderableRows={true} onRowReorder={(e) => this.setState({cars: e.value})}>
+                        <Column reorder={true} style={{width: '2em'}} />
                         <Column columnKey="vin" field="vin" header="Vin"/>
                         <Column columnKey="year" field="year" header="Year" />
                         <Column columnKey="brand" field="brand" header="Brand" />

diff --git a/src/showcase/datatable/DataTableSubmenu.js b/src/showcase/datatable/DataTableSubmenu.js
@@ -22,7 +22,7 @@ export class DataTableSubmenu extends Component {
                     <li><Link to="/datatable/responsive">&#9679; Responsive</Link></li>
                     <li><Link to="/datatable/style">&#9679; Style</Link></li>
                     <li><Link to="/datatable/colresize">&#9679; ColResize</Link></li>
-                    <li><Link to="/datatable/colreorder">&#9679; ColReorder</Link></li>
+                    <li><Link to="/datatable/reorder">&#9679; Reorder</Link></li>
                     <li><Link to="/datatable/coltoggle">&#9679; ColToggle</Link></li>
                     <li><Link to="/datatable/export">&#9679; Export</Link></li>
                     <li><Link to="/datatable/contextmenu">&#9679; ContextMenu</Link></li>