Fixed #616

primefaces · Nov 7, 2018 · 76f9137 · 76f9137
1 parent 132bb19
commit 76f9137
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 17 deletions.
diff --git a/src/components/datatable/BodyRow.js b/src/components/datatable/BodyRow.js
@@ -132,7 +132,7 @@ export class BodyRow extends Component {
 
         return (
             <tr ref={(el) => {this.container = el;}} className={className} onClick={this.onClick} onDoubleClick={this.onDoubleClick} 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}>
+                onDragStart={this.props.onDragStart} onDragEnd={this.onDragEnd} onDragOver={this.onDragOver} onDragLeave={this.onDragLeave} onDrop={this.onDrop} style={{height: this.props.virtualRowHeight}}>
                 {cells}
             </tr>
         );

diff --git a/src/components/datatable/DataTable.d.ts b/src/components/datatable/DataTable.d.ts
@@ -48,6 +48,7 @@ interface DataTableProps {
     scrollHeight?: string;
     virtualScroll?: boolean;
     virtualScrollDelay?: number;
+    virtualRowHeight?: number;
     frozenWidth?: string;
     frozenValue?: any[];
     csvSeparator?: string;

diff --git a/src/components/datatable/DataTable.js b/src/components/datatable/DataTable.js
@@ -63,6 +63,7 @@ export class DataTable extends Component {
         scrollHeight: null,
         virtualScroll: false,
         virtualScrollDelay: 250,
+        virtualRowHeight: 28,
         frozenWidth: null,
         frozenValue: null,
         csvSeparator: ',',
@@ -140,6 +141,7 @@ export class DataTable extends Component {
         scrollHeight: PropTypes.string,
         virtualScroll: PropTypes.bool,
         virtualScrollDelay: PropTypes.number,
+        virtualRowHeight: PropTypes.number,
         frozenWidth: PropTypes.string,
         frozenValue: PropTypes.array,
         csvSeparator: PropTypes.string,
@@ -882,7 +884,7 @@ export class DataTable extends Component {
                         contextMenuSelection={this.props.contextMenuSelection} onContextMenuSelectionChange={this.props.onContextMenuSelectionChange} onContextMenu={this.props.onContextMenu} 
                         expandedRows={this.props.expandedRows} onRowToggle={this.props.onRowToggle} rowExpansionTemplate={this.props.rowExpansionTemplate}
                         onRowExpand={this.props.onRowExpand} responsive={this.props.responsive} emptyMessage={this.props.emptyMessage} 
-                        virtualScroll={this.props.virtualScroll}
+                        virtualScroll={this.props.virtualScroll} virtualRowHeight={this.props.virtualRowHeight}
                         groupField={this.props.groupField} rowGroupMode={this.props.rowGroupMode} rowGroupHeaderTemplate={this.props.rowGroupHeaderTemplate} rowGroupFooterTemplate={this.props.rowGroupFooterTemplate}
                         sortField={this.getSortField()} rowClassName={this.props.rowClassName} onRowReorder={this.props.onRowReorder}>
                         {columns}
@@ -901,7 +903,7 @@ export class DataTable extends Component {
                 body={this.createTableBody(value, columns)} frozenBody={this.props.frozenValue ? this.createTableBody(this.props.frozenValue, columns): null} 
                 footer={this.createTableFooter(columns, footerColumnGroup)}
                 scrollHeight={this.props.scrollHeight} frozen={frozen} frozenWidth={this.props.frozenWidth}
-                virtualScroll={this.props.virtualScroll} rows={this.props.rows} totalRecords={totalRecords}
+                virtualScroll={this.props.virtualScroll} virtualRowHeight={this.props.virtualRowHeight} rows={this.props.rows} totalRecords={totalRecords}
                 onVirtualScroll={this.onVirtualScroll} loading={this.props.loading}></ScrollableView>
     }
 

diff --git a/src/components/datatable/ScrollableView.js b/src/components/datatable/ScrollableView.js
@@ -14,6 +14,7 @@ export class ScrollableView extends Component {
         frozenWidth: null,
         frozenBody: null,
         virtualScroll: false,
+        virtualRowHeight: null,
         rows: null,
         totalRecords: null,
         loading: false,
@@ -29,6 +30,7 @@ export class ScrollableView extends Component {
         frozenWidth: PropTypes.string,
         frozenBody: PropTypes.element,
         virtualScroll: PropTypes.bool,
+        virtualRowHeight: PropTypes.number,
         rows: PropTypes.number,
         totalRcords: PropTypes.number,
         loading: PropTypes.bool,
@@ -57,8 +59,7 @@ export class ScrollableView extends Component {
             this.alignScrollBar();
 
             if(this.props.virtualScroll) {
-                this.calculateRowHeight();
-                this.virtualScroller.style.height = this.props.totalRecords * this.rowHeight + 'px';
+                this.virtualScroller.style.height = this.props.totalRecords * this.props.virtualRowHeight + 'px';
             }
         }
 
@@ -126,7 +127,7 @@ export class ScrollableView extends Component {
         if(this.props.virtualScroll) {
             let viewport = DomHandler.getOuterHeight(this.scrollBody);
             let tableHeight = DomHandler.getOuterHeight(this.scrollTable);
-            let pageHeight = this.rowHeight * this.props.rows;
+            let pageHeight = this.props.virtualRowHeight * this.props.rows;
             let virtualTableHeight = DomHandler.getOuterHeight(this.virtualScroller);
             let pageCount = (virtualTableHeight / pageHeight)||1;
 
@@ -157,13 +158,6 @@ export class ScrollableView extends Component {
             this.scrollFooterBox.style.marginRight = scrollBarWidth + 'px';
         }
     }
-
-    calculateRowHeight() {
-        let row = DomHandler.findSingle(this.scrollTable, 'tr:not(.p-datatable-emptymessage-row)');
-        if(row) {
-            this.rowHeight = DomHandler.getOuterHeight(row);
-        }
-    }
 
     renderColGroup() {
         if(this.props.columns && this.props.columns.length) {

diff --git a/src/components/datatable/TableBody.js b/src/components/datatable/TableBody.js
@@ -445,7 +445,7 @@ export class TableBody extends Component {
                             onRadioClick={this.onRadioClick} onCheckboxClick={this.onCheckboxClick} selected={selected} contextMenuSelected={contextMenuSelected} rowClassName={this.props.rowClassName}
                             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>
+                            onDrop={this.onRowDrop} virtualRowHeight={this.props.virtualRowHeight}>{this.props.children}</BodyRow>
 
                 rows.push(bodyRow);
 

diff --git a/src/showcase/datatable/DataTableDemo.js b/src/showcase/datatable/DataTableDemo.js
@@ -1448,7 +1448,10 @@ export class DataTableRowGroupDemo extends Component {
             <p>When using frozen columns with column grouping, use <i>frozenHeaderColumnGroup</i> and <i>frozenFooterColumnGroup</i> properties along with
             <i>headerColumnGroup</i> and <i>footerColumnGroup</i>.</p>
 
-            <p>Virtual scrolling is enabled using <i>virtualScroll</i>, <i>onVirtualScroll</i> properties combined with lazy loading so that data is loaded on the fly during scrolling. View the <Link to="/datatable/scroll">scrolling demo</Link> for a sample implementation.</p>
+            <p>Virtual scrolling is enabled using <i>virtualScroll</i> and <i>onVirtualScroll</i> properties combined with lazy loading so that data is loaded on the fly during scrolling. 
+            For smooth scrolling twice the amount of rows property is loaded on a lazy load event. In addition, to avoid performance problems row height is not calculated automatically and 
+            should be provided using <i>virtualRowHeight</i> property which defaults to 28px. View the <Link to="/datatable/scroll">scrolling demo</Link> for a sample implementation.</p>
+
 <CodeHighlight className="language-jsx">
 {`
 <DataTable value={this.state.lazyCars} scrollable={true} scrollHeight="200px" virtualScroll={true} 
@@ -1844,6 +1847,12 @@ export class DataTableLazyDemo extends Component {
                             <td>250</td>
                             <td>Delay in virtual scroll before doing a call to lazy load.</td>
                         </tr>
+                        <tr>
+                            <td>virtualRowHeight</td>
+                            <td>number</td>
+                            <td>28</td>
+                            <td>Height of a row to use in calculations of virtual scrolling.</td>
+                        </tr>
                         <tr>
                             <td>frozenWidth</td>
                             <td>string</td>

diff --git a/src/showcase/datatable/DataTableScrollDemo.js b/src/showcase/datatable/DataTableScrollDemo.js
@@ -117,7 +117,7 @@ export class DataTableScrollDemo extends Component {
                         <Column field="color" header="Color" />
                     </DataTable>
 
-                    <DataTable header="VirtualScroll with Lazy Loading" value={this.state.lazyCars} scrollable={true} scrollHeight="200px" virtualScroll={true} 
+                    <DataTable header="VirtualScroll with Lazy Loading" value={this.state.lazyCars} scrollable={true} scrollHeight="200px" virtualScroll={true} virtualRowHeight={30}
                         rows={10} totalRecords={this.state.lazyTotalRecords} lazy={true} onVirtualScroll={this.onVirtualScroll} loading={this.state.loading} style={{marginTop:'30px'}}>
                         <Column field="vin" header="Vin" />
                         <Column field="year" header="Year" />
@@ -295,7 +295,7 @@ export class DataTableScrollDemo extends Component {
                         <Column field="color" header="Color" />
                     </DataTable>
                     
-                    <DataTable header="VirtualScroll with Lazy Loading" value={this.state.lazyCars} scrollable={true} scrollHeight="200px" virtualScroll={true} 
+                    <DataTable header="VirtualScroll with Lazy Loading" value={this.state.lazyCars} scrollable={true} scrollHeight="200px" virtualScroll={true} virtualRowHeight={30}
                         rows={10} totalRecords={this.state.lazyTotalRecords} lazy={true} onVirtualScroll={this.onVirtualScroll} loading={this.state.loading} style={{marginTop:'30px'}}>
                         <Column field="vin" header="Vin" />
                         <Column field="year" header="Year" />