fix: recompute sticky column offsets on column resize

cypress/integration/column.js

@@ -163,4 +163,32 @@ describe('Column', function () {
             });
         });
     });
+
+    it('keeps other pinned columns aligned after resizing a pinned column', function () {
+        cy.clickDropdown(2);
+        cy.clickDropdownItem(2, 'Freeze');
+        cy.clickDropdown(3);
+        cy.clickDropdownItem(3, 'Freeze');
+
+        cy.get('.dt-cell--header-2 .dt-cell__resize-handle')
+            .trigger('mousedown')
+            .trigger('mousemove', { pageX: 700, pageY: 20, which: 1 })
+            .trigger('mouseup');
+
+        cy.get('.dt-scrollable').then(($scrollable) => {
+            const scrollable = $scrollable[0];
+
+            scrollable.scrollLeft = 220;
+            scrollable.dispatchEvent(new Event('scroll'));
+
+            cy.wait(50).then(() => {
+                const resizedBodyCell = Cypress.$('.dt-cell--2-0')[0].getBoundingClientRect();
+                const nextStickyBodyCell = Cypress.$('.dt-cell--3-0')[0].getBoundingClientRect();
+                const nextStickyHeaderCell = Cypress.$('.dt-cell--header-3')[0].getBoundingClientRect();
+
+                expect(nextStickyBodyCell.left).to.be.closeTo(resizedBodyCell.right, 1);
+                expect(nextStickyHeaderCell.left).to.be.closeTo(nextStickyBodyCell.left, 1);
+            });
+        });
+    });
 });

src/columnmanager.js

@@ -193,6 +193,7 @@ export default class ColumnManager {
             });
             this.setColumnHeaderWidth(colIndex);
             this.setColumnWidth(colIndex);
+            this.style.refreshStickyColumns();
             this.style.setBodyStyle();
         };
         $.on(document.body, 'mousemove', onMouseMove);
@@ -230,6 +231,7 @@ export default class ColumnManager {
             this.datamanager.updateColumn(colIndex, { width });
             this.setColumnHeaderWidth(colIndex);
             this.setColumnWidth(colIndex);
+            this.style.refreshStickyColumns();
         });
     }
 

src/style.js

@@ -156,8 +156,7 @@ export default class Style {
         this.setupColumnWidth();
         this.distributeRemainingWidth();
         this.setColumnStyle();
-        this.setStickyColumnStyle();
-        this.updateStickyTopPositions(this.bodyScrollable.scrollLeft || 0);
+        this.refreshStickyColumns();
         this.setBodyStyle();
     }
 
@@ -315,6 +314,10 @@ export default class Style {
                 this.columnmanager.setColumnHeaderWidth(column.colIndex);
                 this.columnmanager.setColumnWidth(column.colIndex);
             });
+        this.refreshStickyColumns();
+    }
+
+    refreshStickyColumns() {
         this.setStickyColumnStyle();
         this.updateStickyTopPositions(this.bodyScrollable.scrollLeft || 0);
     }
@@ -381,11 +384,14 @@ export default class Style {
     setStickyColumnStyle() {
         if (!this.datamanager || !this.datamanager.getColumns) return;
 
+        const columns = this.datamanager.getColumns();
+        if (!columns.some(column => column.sticky) && !(this._stickySelectors || []).length) return;
+
         const stickySelectors = [];
         let stickyOffset = 0;
         let normalOffset = 0;
 
-        this.datamanager.getColumns().forEach((column) => {
+        columns.forEach((column) => {
             const $headerCell = this.getColumnHeaderElement(column.colIndex);
             const renderedWidth = $headerCell ? $headerCell.offsetWidth : column.width;