refactor: revert sticky column changes

cypress/integration/column.js

@@ -29,7 +29,7 @@ describe('Column', function () {
             .its('currentSort.colIndex')
             .should('eq', 2);
 
-        cy.get('.dt-scrollable .dt-row:first div:nth-of-type(3)')
+        cy.get('.dt-scrollable .dt-body .dt-row:first div:nth-of-type(3)')
             .contains('Airi Satou');
 
         cy.clickDropdownItem(2, 'Reset sorting');
@@ -63,8 +63,8 @@ describe('Column', function () {
     it('resize column using double click', function () {
         cy.get('.dt-cell--header-4 .dt-cell__resize-handle').trigger('dblclick');
         cy.getColumnCell(4).should('have.css', 'width')
-            .and('match', /9\dpx/);
+            .and('match', /10\dpx/);
         cy.getCell(4, 1).should('have.css', 'width')
-            .and('match', /9\dpx/);
+            .and('match', /10\dpx/);
     });
 });

cypress/integration/inline_filters.js

@@ -81,7 +81,7 @@ describe('Inline Filters', function () {
         cy.getCell(5, 24).click().type('{ctrl}f');
         cy.get('@filterInput5').type('>3000', {delay: 100});
 
-        cy.get('.dt-scrollable .dt-row:first')
+        cy.get('.dt-body .dt-row:first')
             .should('contain', 'Angelica')
             .should('have.class', 'dt-row-24');
         cy.get('@filterInput5').clear();

cypress/integration/row.js

@@ -4,7 +4,7 @@ describe('Row', function () {
     });
 
     it('check / uncheck row', function () {
-        cy.get('.dt-scrollable .dt-row:first')
+        cy.get('.dt-body .dt-row:first')
             .find('input[type="checkbox"]')
             .click();
 

index.html

@@ -151,9 +151,9 @@ <h1>Frappe DataTable</h1>
 
 			function buildData() {
 				columns = [
-					{ name: "Name", width: 150, sticky: true },
+					{ name: "Name", width: 150 },
 					{ name: "Position", width: 200 },
-					{ name: "Office", sticky: true },
+					{ name: "Office" },
 					{ name: "Extn." },
 					{
 						name: "Start Date",

src/body-renderer.js

@@ -7,7 +7,9 @@ export default class BodyRenderer {
         this.rowmanager = instance.rowmanager;
         this.cellmanager = instance.cellmanager;
         this.bodyScrollable = instance.bodyScrollable;
+        this.bodyContainer = instance.bodyContainer;
         this.footer = this.instance.footer;
+        this.header = this.instance.header;
         this.log = instance.log;
     }
 
@@ -32,11 +34,7 @@ export default class BodyRenderer {
             return null;
         }).filter(index => index !== null);
 
-        const computedStyle = getComputedStyle(this.bodyScrollable);
-
         let config = {
-            width: computedStyle.width,
-            height: computedStyle.height,
             itemHeight: this.options.cellHeight,
             total: rows.length,
             generate: (index) => {
@@ -53,9 +51,9 @@ export default class BodyRenderer {
         };
 
         if (!this.hyperlist) {
-            this.hyperlist = new HyperList(this.bodyScrollable, config);
+            this.hyperlist = new HyperList(this.bodyContainer, config);
         } else {
-            this.hyperlist.refresh(this.bodyScrollable, config);
+            this.hyperlist.refresh(this.bodyContainer, config);
         }
 
         this.renderFooter();
@@ -123,6 +121,24 @@ export default class BodyRenderer {
         this.rowmanager.highlightCheckedRows();
         this.cellmanager.selectAreaOnClusterChanged();
         this.cellmanager.focusCellOnClusterChanged();
+        this.bodyContainer.style.removeProperty('overflow');
+        this.setbodyWidth();
+    }
+
+    setbodyWidth() {
+        // change width of dt-body once the all operations are done
+        setTimeout(() => {
+            const computedStyle = getComputedStyle(this.bodyScrollable);
+
+            const cells = this.header.querySelectorAll('.dt-cell--header');
+            let totalColWidth = 0;
+            cells.forEach((cell, index) => {
+                totalColWidth += cell.clientWidth + 1;
+            });
+            this.bodyContainer.style.width = `${totalColWidth + 5}px`;
+            this.bodyContainer.style.height = `calc(${computedStyle.height} - 80px)`;
+            this.bodyScrollable.style.height = computedStyle.height;
+        }, 100);
     }
 
     showToastMessage(message, hideAfter) {

src/cellmanager.js

@@ -17,6 +17,7 @@ export default class CellManager {
             'style',
             'header',
             'bodyScrollable',
+            'bodyContainer',
             'columnmanager',
             'rowmanager',
             'datamanager',
@@ -25,8 +26,6 @@ export default class CellManager {
         ]);
 
         this.bindEvents();
-        this.stickyRowWidth = 0;
-        this.stickyColWitdh = [];
     }
 
     bindEvents() {
@@ -45,7 +44,7 @@ export default class CellManager {
     bindEditCell() {
         this.$editingCell = null;
 
-        $.on(this.bodyScrollable, 'dblclick', '.dt-cell', (e, cell) => {
+        $.on(this.bodyContainer, 'dblclick', '.dt-cell', (e, cell) => {
             this.activateEditing(cell);
         });
 
@@ -102,6 +101,7 @@ export default class CellManager {
                 const $cell = $.closest('.dt-cell', e.target);
                 const { colIndex } = $.data($cell);
 
+                console.log(colIndex, "colIndex", colIndex);
                 this.activateFilter(colIndex);
                 return true;
             });
@@ -166,12 +166,12 @@ export default class CellManager {
     bindMouseEvents() {
         let mouseDown = null;
 
-        $.on(this.bodyScrollable, 'mousedown', '.dt-cell', (e) => {
+        $.on(this.bodyContainer, 'mousedown', '.dt-cell', (e) => {
             mouseDown = true;
             this.focusCell($(e.delegatedTarget));
         });
 
-        $.on(this.bodyScrollable, 'mouseup', () => {
+        $.on(this.bodyContainer, 'mouseup', () => {
             mouseDown = false;
         });
 
@@ -188,11 +188,11 @@ export default class CellManager {
             this.selectArea($(e.delegatedTarget));
         };
 
-        $.on(this.bodyScrollable, 'mousemove', '.dt-cell', throttle(selectArea, 50));
+        $.on(this.bodyContainer, 'mousemove', '.dt-cell', throttle(selectArea, 50));
     }
 
     bindTreeEvents() {
-        $.on(this.bodyScrollable, 'click', '.dt-tree-node__toggle', (e, $toggle) => {
+        $.on(this.bodyContainer, 'click', '.dt-tree-node__toggle', (e, $toggle) => {
             const $cell = $.closest('.dt-cell', $toggle);
             const { rowIndex } = $.data($cell);
 
@@ -648,7 +648,7 @@ export default class CellManager {
     }
 
     refreshCell(cell, refreshHtml = false) {
-        const $cell = $(this.selector(cell.colIndex, cell.rowIndex), this.bodyScrollable);
+        const $cell = $(this.selector(cell.colIndex, cell.rowIndex), this.bodyContainer);
         $cell.innerHTML = this.getCellContent(cell, refreshHtml);
     }
 
@@ -709,7 +709,7 @@ export default class CellManager {
     }
 
     getCell$(colIndex, rowIndex) {
-        return $(this.selector(colIndex, rowIndex), this.bodyScrollable);
+        return $(this.selector(colIndex, rowIndex), this.bodyContainer);
     }
 
     getAboveCell$($cell) {
@@ -769,11 +769,11 @@ export default class CellManager {
     }
 
     getRowHeight() {
-        return $.style($('.dt-row', this.bodyScrollable), 'height');
+        return $.style($('.dt-row', this.bodyContainer), 'height');
     }
 
     scrollToCell($cell) {
-        if ($.inViewport($cell, this.bodyScrollable) || $.inViewport($cell, this.footer)) return false;
+        if ($.inViewport($cell, this.bodyContainer) || $.inViewport($cell, this.footer)) return false;
 
         const {
             rowIndex
@@ -802,44 +802,10 @@ export default class CellManager {
             isTotalRow
         });
 
-        let styles = '';
-
         const row = this.datamanager.getRow(rowIndex);
 
         const isBodyCell = !(isHeader || isFilter || isTotalRow);
 
-        const serialNoColIndex = !this.options.checkboxColumn && this.options.serialNoColumn ? 0 : 1;
-
-        let sticky = false;
-
-        let checkboxserialNoclass = '';
-
-        if (colIndex === 0 && this.options.checkboxColumn) {
-            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 || 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) + 1);
-            }
-            styles = `left:${this.stickyColWitdh[cell.id]}px;`;
-            sticky = true;
-
-        } else if ((isBodyCell || isTotalRow) && cell.column.sticky) {
-            styles = `left:${this.stickyColWitdh[cell.column.id]}px;`;
-            sticky = true;
-        }
-
         const className = [
             'dt-cell',
             'dt-cell--col-' + colIndex,
@@ -849,12 +815,10 @@ 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' : '',
-            checkboxserialNoclass,
         ].join(' ');
 
         return `
-            <div class="${className}" ${dataAttr} tabindex="0" style="${styles}">
+            <div class="${className}" ${dataAttr} tabindex="0">
                 ${this.getCellContent(cell)}
             </div>
         `;

src/columnmanager.js

@@ -166,6 +166,7 @@ export default class ColumnManager {
             this.setColumnWidth(colIndex);
             this.style.setBodyStyle();
             $resizingCell = null;
+            this.bodyRenderer.setbodyWidth();
         };
         $.on(document.body, 'mouseup', onMouseup);
         this.instance.on('onDestroy', () => {
@@ -270,6 +271,11 @@ export default class ColumnManager {
             });
     }
 
+    pinColumn(colIndex) {
+        this.instance.freeze();
+        this.instance.unfreeze();
+    }
+
     removeColumn(colIndex) {
         const removedCol = this.getColumn(colIndex);
         this.instance.freeze();

src/datatable.js

@@ -110,9 +110,11 @@ class DataTable {
         this.wrapper.innerHTML = `
             <div class="datatable" dir="${this.options.direction}">
                 <div class="datatable-content">
-                    <div class="dt-header"></div>
-                    <div class="dt-scrollable"></div>
-                    <div class="dt-footer"></div>
+                    <div class="dt-scrollable">
+                        <div class="dt-header"></div>
+                        <div class="dt-body"></div> 
+                        <div class="dt-footer"></div>
+                    </div>
                 </div>
                 <div class="dt-freeze">
                     <span class="dt-freeze__message">
@@ -127,6 +129,7 @@ class DataTable {
 
         this.datatableWrapper = $('.datatable', this.wrapper);
         this.header = $('.dt-header', this.wrapper);
+        this.bodyContainer = $('.dt-body', this.wrapper);
         this.footer = $('.dt-footer', this.wrapper);
         this.bodyScrollable = $('.dt-scrollable', this.wrapper);
         this.freezeContainer = $('.dt-freeze', this.wrapper);
@@ -213,6 +216,10 @@ class DataTable {
         this.columnmanager.sortColumn(colIndex, sortOrder);
     }
 
+    pinColumn(colIndex) {
+        this.columnmanager.pinColumn(colIndex);
+    }
+
     removeColumn(colIndex) {
         this.columnmanager.removeColumn(colIndex);
     }

src/defaults.js

@@ -25,6 +25,12 @@ export default function getDefaultOptions(instance) {
                     this.sortColumn(column.colIndex, 'none');
                 }
             },
+            // {
+            //     label: instance.translate('Pin column'),
+            //     action: function (column) {
+            //         this.pinColumn(column.colIndex);
+            //     }
+            // },
             {
                 label: instance.translate('Remove column'),
                 action: function (column) {

src/style.css

@@ -33,18 +33,28 @@
     }
 }
 
-.dt-header{
-    border-bottom: 2px solid var(--dt-border-color);
+.dt-header {
+    top: 0;
 }
 
-.datatable-content{
-    .dt-header{
-        display: flex;
-    }
+.dt-header,
+.dt-footer {
+    position: sticky;
+    background: white;
+}
+
+.dt-footer {
+    bottom: 0;
+}
+.dt-body {
+    overflow-y: auto;
+    overflow-x: clip;
 }
 
 .dt-scrollable {
     height: 40vw;
+    border-top: 2px solid var(--dt-border-color);
+    overflow-y: hidden;
 
     &--highlight-all {
         background-color: var(--dt-selection-highlight-color);
@@ -81,7 +91,7 @@
         display: none;
     }
 
-    &:last-child:not(.dt-row-filter) {
+    &:last-child:not(.dt-row-filter) .dt-cell {
         border-bottom: 1px solid var(--dt-border-color);
     }
 }
@@ -154,6 +164,7 @@
 
     &--header {
         background-color: var(--dt-header-cell-bg);
+        border-bottom: 2px solid var(--dt-border-color);
     }
 
     &--header:last-child {
@@ -309,9 +320,4 @@
 
 body.dt-resize {
     cursor: col-resize;
-}
-.dt-sticky-col {
-    position: sticky;
-    z-index: 1;
-    left: 0;
 }