Merge pull request #207 from iamejaaz/sticky-column-fix

fix: total row and scrolling issue

Author: iamejaaz

src/body-renderer.js

@@ -123,7 +123,6 @@ export default class BodyRenderer {
         this.rowmanager.highlightCheckedRows();
         this.cellmanager.selectAreaOnClusterChanged();
         this.cellmanager.focusCellOnClusterChanged();
-        this.bodyScrollable.style.removeProperty('overflow');
     }
 
     showToastMessage(message, hideAfter) {

src/cellmanager.js

@@ -812,26 +812,30 @@ export default class CellManager {
 
         let sticky = false;
 
+        let checkboxserialNoclass = '';
+
         if (colIndex === 0 && this.options.checkboxColumn) {
-            if (cell.isHeader && !(cell.id in this.stickyColWitdh)) this.stickyRowWidth = 33;
+            if (cell.isHeader && !(cell.id in this.stickyColWitdh)) this.stickyRowWidth = 34;
+            checkboxserialNoclass = 'dt-cell-checkbox';
             sticky = true;
         } else if (colIndex === serialNoColIndex && this.options.serialNoColumn) {
             if (cell.isHeader && !(cell.id in this.stickyColWitdh)) {
                 this.stickyColWitdh[cell.id] = this.stickyRowWidth;
-                this.stickyRowWidth += (cell.width || 32);
+                this.stickyRowWidth += (cell.width || 37);
+                checkboxserialNoclass = 'dt-cell-serial-no';
             }
             styles = `left:${this.stickyColWitdh[isBodyCell ? cell.column.id : cell.id]}px;`;
             sticky = true;
 
         } else if (cell.sticky) {
             if (cell.isHeader && !(cell.id in this.stickyColWitdh)) {
                 this.stickyColWitdh[cell.id] = this.stickyRowWidth;
-                this.stickyRowWidth += (cell.width || 100);
+                this.stickyRowWidth += ((cell.width || 100) + 1);
             }
             styles = `left:${this.stickyColWitdh[cell.id]}px;`;
             sticky = true;
 
-        } else if (isBodyCell && cell.column.sticky) {
+        } else if ((isBodyCell || isTotalRow) && cell.column.sticky) {
             styles = `left:${this.stickyColWitdh[cell.column.id]}px;`;
             sticky = true;
         }
@@ -845,7 +849,8 @@ export default class CellManager {
             isHeader ? `dt-cell--header-${colIndex}` : '',
             isFilter ? 'dt-cell--filter' : '',
             isBodyCell && (row && row.meta.isTreeNodeClose) ? 'dt-cell--tree-close' : '',
-            sticky ? 'dt-sticky-col' : ''
+            sticky ? 'dt-sticky-col' : '',
+            checkboxserialNoclass,
         ].join(' ');
 
         return `

src/style.css

@@ -27,14 +27,16 @@
 .datatable {
     position: relative;
     overflow: hidden;
+    .dt-cell--col-0{
+        border-left: 1px solid var(--dt-border-color);
+    }
 }
 
-.dt-scrollable > .dt-row-0{
-    border-top: 2px solid var(--dt-border-color);
+.dt-header{
+    border-bottom: 2px solid var(--dt-border-color);
 }
 
 .datatable-content{
-    overflow-x: auto;
     .dt-header{
         display: flex;
     }
@@ -78,7 +80,7 @@
 .dt-cell {
     border: 1px solid var(--dt-border-color);
     border-bottom: none;
-    border-right: none;
+    border-left: none;
     position: relative;
     outline: none;
     padding: 0;

src/style.js

@@ -23,6 +23,7 @@ export default class Style {
         this.styleEl = styleEl;
 
         this.bindResizeWindow();
+        this.bindScrollHeader();
     }
 
     get stylesheet() {
@@ -38,6 +39,60 @@ export default class Style {
         }
     }
 
+    bindScrollHeader() {
+        this._settingHeaderPosition = false;
+
+        $.on(this.bodyScrollable, 'scroll', (e) => {
+
+            if (this._settingHeaderPosition) return;
+
+            this._settingHeaderPosition = true;
+
+            requestAnimationFrame(() => {
+
+                const scrollLeft = e.target.scrollLeft;
+
+                // Move non-sticky header and footer cells normally
+                const nonStickyHeaderCells = this.header.querySelectorAll('.dt-cell:not(.dt-sticky-col)');
+                const nonStickyFooterCells = this.footer.querySelectorAll('.dt-cell:not(.dt-sticky-col)');
+
+                nonStickyHeaderCells.forEach(cell => {
+                    $.style(cell, { transform: `translateX(${-scrollLeft}px)` });
+                });
+
+                nonStickyFooterCells.forEach(cell => {
+                    $.style(cell, { transform: `translateX(${-scrollLeft}px)` });
+                });
+
+                const stickyHeaderCells = this.header.querySelectorAll(
+                    '.dt-cell.dt-sticky-col:not(.dt-cell-serial-no):not(.dt-cell-checkbox)'
+                );
+
+                stickyHeaderCells.forEach((headerCell) => {
+
+                    const colIndex = headerCell.getAttribute('data-col-index');
+                    const bodyCell = this.bodyScrollable.querySelector(`.dt-cell[data-col-index="${colIndex}"]`);
+                    const colLeft = parseFloat(headerCell.style.left) || 0; // get left position of the column
+
+                    // Find corresponding footer cell
+                    const footerCell = this.footer.querySelector(`.dt-cell[data-col-index="${colIndex}"]`);
+
+                    if (~~(bodyCell.offsetLeft - scrollLeft) > colLeft) {
+                        headerCell.style.transform = `translateX(${-scrollLeft - 1}px)`;
+                        if (footerCell) {
+                            footerCell.style.transform = `translateX(${scrollLeft ? -scrollLeft - 1 : 0}px)`;
+                        }
+                    } else {
+                        headerCell.style.transform = `translateX(${colLeft - headerCell.offsetLeft}px)`;
+                        if (footerCell) footerCell.style.transform = `translateX(${colLeft - footerCell.offsetLeft}px)`;
+                    }
+                });
+
+                this._settingHeaderPosition = false;
+            });
+        });
+    }
+
     onWindowResize() {
         this.distributeRemainingWidth();
         this.refreshColumnWidth();