Fixed #2282

primefaces · Mar 13, 2017 · be648a8 · be648a8
1 parent b57ee1c
commit be648a8
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 34 deletions.
diff --git a/components/datatable/datatable.ts b/components/datatable/datatable.ts
@@ -454,8 +454,6 @@ export class ScrollableView implements AfterViewInit,AfterViewChecked,OnDestroy
 })
 export class DataTable implements AfterViewChecked,AfterViewInit,AfterContentInit,OnInit,DoCheck,OnDestroy,BlockableUI {
 
-    @Input() value: any[];
-
     @Input() paginator: boolean;
 
     @Input() rows: number;
@@ -549,6 +547,8 @@ export class DataTable implements AfterViewChecked,AfterViewInit,AfterContentIni
     @Input() paginatorPosition: string = 'bottom';
 
     @Input() metaKeySelection: boolean = true;
+
+    @Input() immutable: boolean;
 
     @Output() onEditInit: EventEmitter<any> = new EventEmitter();
 
@@ -609,6 +609,8 @@ export class DataTable implements AfterViewChecked,AfterViewInit,AfterContentIni
     @ContentChild(HeaderColumnGroup) headerColumnGroup: HeaderColumnGroup;
 
     @ContentChild(FooterColumnGroup) footerColumnGroup: FooterColumnGroup;
+
+    public _value: any[];
 
     public dataToRender: any[];
 
@@ -675,20 +677,25 @@ export class DataTable implements AfterViewChecked,AfterViewInit,AfterContentIni
     public loading: boolean;
 
     differ: any;
+
+    differs: IterableDiffers;
 
     globalFilterFunction: any;
 
     columnsSubscription: Subscription;
 
-    constructor(public el: ElementRef, public domHandler: DomHandler, differs: IterableDiffers, 
+    constructor(public el: ElementRef, public domHandler: DomHandler, public differs: IterableDiffers, 
             public renderer: Renderer, public changeDetector: ChangeDetectorRef, public objectUtils: ObjectUtils) {
-        this.differ = differs.find([]).create(null);
     }
 
     ngOnInit() {
         if(this.lazy) {
             this.onLazyLoad.emit(this.createLazyLoadMetadata());
         }
+
+        if(!this.immutable) {
+            this.differ = this.differs.find([]).create(null);
+        }
     }
 
     ngAfterContentInit() {
@@ -746,42 +753,57 @@ export class DataTable implements AfterViewChecked,AfterViewInit,AfterContentIni
     }
 
     ngDoCheck() {
-        let changes = this.differ.diff(this.value);
-        if(changes) {
-            this.dataChanged = true;
-            if(this.paginator) {
-                this.updatePaginator();
+        if(!this.immutable) {
+            let changes = this.differ.diff(this.value);
+            if(changes) {
+                this.handleDataChange();
             }
+        }
+    }
+
+    @Input() get value(): any[] {
+        return this._value;
+    }
 
-            if(this.hasFilter()) {
-                if(this.lazy) {
-                    //prevent loop
-                    if(this.stopFilterPropagation)
-                        this.stopFilterPropagation = false;
-                    else
-                        this._filter();
-                }
-                else {
+    set value(val:any[]) {
+        this._value = val;
+        this.handleDataChange();
+    }
+
+    handleDataChange() {
+        this.dataChanged = true;
+        if(this.paginator) {
+            this.updatePaginator();
+        }
+
+        if(this.hasFilter()) {
+            if(this.lazy) {
+                //prevent loop
+                if(this.stopFilterPropagation)
+                    this.stopFilterPropagation = false;
+                else
                     this._filter();
-                }
             }
-
-            if(this.stopSortPropagation) {
-                this.stopSortPropagation = false;
-            }
-            else if(!this.lazy && (this.sortField||this.multiSortMeta)) {  
-                if(!this.sortColumn && this.columns) {
-                    this.sortColumn = this.columns.find(col => col.field === this.sortField && col.sortable === 'custom');
-                }              
-
-                if(this.sortMode == 'single')
-                    this.sortSingle();
-                else if(this.sortMode == 'multiple')
-                    this.sortMultiple();
+            else {
+                this._filter();
             }
-
-            this.updateDataToRender(this.filteredValue||this.value);
         }
+
+        if(this.stopSortPropagation) {
+            this.stopSortPropagation = false;
+        }
+        else if(!this.lazy && (this.sortField||this.multiSortMeta)) {  
+            if(!this.sortColumn && this.columns) {
+                this.sortColumn = this.columns.find(col => col.field === this.sortField && col.sortable === 'custom');
+            }              
+
+            if(this.sortMode == 'single')
+                this.sortSingle();
+            else if(this.sortMode == 'multiple')
+                this.sortMultiple();
+        }
+
+        this.updateDataToRender(this.filteredValue||this.value);
     }
 
     initColumns(): void {

diff --git a/showcase/demo/datatable/datatabledemo.html b/showcase/demo/datatable/datatabledemo.html
@@ -879,6 +879,11 @@ <h3>Overlays in Cells</h3>
 </code>
 </pre>
 
+            <h3>Immutable Mode</h3>
+            <p>DataTable uses diff checking to realize if the underlying data has changed, this may slow down the performance so to avoid it set immutable mode on and make sure
+                your data changes such as adding or removing a record always creates a new array reference. For example, use slice instead of splice when removing an item 
+                or uses spread operator instead of push method when adding an item.</p>
+
             <h3>Attributes</h3>
             <div class="doc-tablewrapper">
                 <table class="doc-table">
@@ -1168,6 +1173,12 @@ <h3>Attributes</h3>
                             <td>Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item
                             can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.</td>
                         </tr>
+                        <tr>
+                            <td>immutable</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Improves performance by avoiding diff checking, changes to value should be done in an immutable way on application side when immutable property is enabled.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>