@universis/ngx-tables 0.6.20 → 0.6.21

package/fesm2015/universis-ngx-tables.js

@@ -540,6 +540,9 @@ class AdvancedTableComponent {
         this.init = new EventEmitter();
         this.reload = new EventEmitter();
         this.select = new EventEmitter();
+        this.draw = new EventEmitter();
+        this.page = new EventEmitter();
+        this.scroll = new EventEmitter();
         this.selectedItems = new EventEmitter();
         this.scrollable = true;
         this.serverSide = true;
@@ -1042,6 +1045,20 @@ class AdvancedTableComponent {
                     }, 0);
                 }
             });
+            tableElement.on('draw.dt', (event) => {
+                this.draw.emit();
+                if (this.dataTable) {
+                    const info = this.dataTable.page.info();
+                    this.page.emit(info);
+                    try {
+                        this.dataTable.columns.adjust();
+                    }
+                    catch (err) {
+                        console.error('ERROR', 'An error occurred while adjusting table columns');
+                        console.error(err);
+                    }
+                }
+            });
             // allow selection
             if (this.selectable) {
                 // get first column (as row primary key)
@@ -1066,10 +1083,6 @@ class AdvancedTableComponent {
                 // user interface additions
                 // handle page change event (a trick for firing draw.dt events)
                 tableElement
-                    // for each page
-                    .on('page.dt', ($event) => {
-                    const info = this.dataTable.page.info();
-                })
                     // handle draw events
                     .on('draw.dt', () => {
                     if (this.customSelect) {
@@ -1170,11 +1183,11 @@ class AdvancedTableComponent {
                     // get order expression
                     const order = aoData[2].value;
                     // get skip records param
-                    const skip = aoData[3].value;
+                    let skip = aoData[3].value;
                     // get page size param
-                    const top = aoData[4].value;
+                    let top = aoData[4].value;
                     // get search value
-                    const searchText = aoData[5].value;
+                    const search = aoData[5].value;
                     // get data queryable
                     const q = self._query instanceof ClientDataQueryable ? self._query : self._context.model(self.config.model).asQueryable();
                     // apply paging params
@@ -1301,15 +1314,22 @@ class AdvancedTableComponent {
             }
             if (this.selectable) ;
             // handle init.dt event and emit local event
-            this.dataTable = tableElement.DataTable(settings);
-            tableElement.on('init.dt', () => {
-                if (this.dataTable == null) {
-                    return;
-                }
-                // restore default empty table html
-                // (due to ng async binding)
-                this.init.emit(this.dataTable);
-            });
+            this.dataTable = tableElement.on('init.dt', (event) => {
+                const scroller = jQuery(event.target).parent();
+                // handle scrolling
+                scroller.on('scroll', (scrollEvent) => {
+                    const target = jQuery(scrollEvent.target);
+                    const top = target.scrollTop();
+                    const left = target.scrollLeft();
+                    if (this.dataTable) {
+                        this.scroll.emit({
+                            top,
+                            left
+                        });
+                    }
+                });
+                this.init.emit();
+            }).DataTable(settings);
             // show or hide header
             if (!this.showHeader) {
                 this._element.nativeElement
@@ -1328,6 +1348,16 @@ class AdvancedTableComponent {
             }
         }
     }
+    scrollTop(value) {
+        if (this.dataTable) {
+            this.dataTable.parent().scrollTop(value);
+        }
+    }
+    scrollLeft(value) {
+        if (this.dataTable) {
+            this.dataTable.parent().scrollLeft(value);
+        }
+    }
     get lastQuery() {
         if (this.config == null) {
             return null;
@@ -1566,6 +1596,9 @@ AdvancedTableComponent.propDecorators = {
     init: [{ type: Output, args: ['init',] }],
     reload: [{ type: Input, args: ['reload',] }],
     select: [{ type: Output, args: ['select',] }],
+    draw: [{ type: Output, args: ['draw',] }],
+    page: [{ type: Output, args: ['page',] }],
+    scroll: [{ type: Output, args: ['scroll',] }],
     selectedItems: [{ type: Output, args: ['selectedItems',] }],
     scrollable: [{ type: Input }],
     serverSide: [{ type: Input }],