Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit bf65f4b

Browse files
iamejaaziamejaaz
committed
fix: total row and scrolling issue
1 parent 007a7bf commit bf65f4b

File tree

4 files changed

+71
-10
lines changed

4 files changed

+71
-10
lines changed

‎src/body-renderer.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,6 @@ export default class BodyRenderer {
123123
this.rowmanager.highlightCheckedRows();
124124
this.cellmanager.selectAreaOnClusterChanged();
125125
this.cellmanager.focusCellOnClusterChanged();
126-
this.bodyScrollable.style.removeProperty('overflow');
127126
}
128127

129128
showToastMessage(message, hideAfter) {

‎src/cellmanager.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -812,26 +812,30 @@ export default class CellManager {
812812

813813
let sticky = false;
814814

815+
let checkboxserialNoclass = '';
816+
815817
if (colIndex === 0 && this.options.checkboxColumn) {
816-
if (cell.isHeader && !(cell.id in this.stickyColWitdh)) this.stickyRowWidth = 33;
818+
if (cell.isHeader && !(cell.id in this.stickyColWitdh)) this.stickyRowWidth = 34;
819+
checkboxserialNoclass = 'dt-cell-checkbox';
817820
sticky = true;
818821
} else if (colIndex === serialNoColIndex && this.options.serialNoColumn) {
819822
if (cell.isHeader && !(cell.id in this.stickyColWitdh)) {
820823
this.stickyColWitdh[cell.id] = this.stickyRowWidth;
821-
this.stickyRowWidth += (cell.width || 32);
824+
this.stickyRowWidth += (cell.width || 37);
825+
checkboxserialNoclass = 'dt-cell-serial-no';
822826
}
823827
styles = `left:${this.stickyColWitdh[isBodyCell ? cell.column.id : cell.id]}px;`;
824828
sticky = true;
825829

826830
} else if (cell.sticky) {
827831
if (cell.isHeader && !(cell.id in this.stickyColWitdh)) {
828832
this.stickyColWitdh[cell.id] = this.stickyRowWidth;
829-
this.stickyRowWidth += (cell.width || 100);
833+
this.stickyRowWidth += ((cell.width || 100) + 1);
830834
}
831835
styles = `left:${this.stickyColWitdh[cell.id]}px;`;
832836
sticky = true;
833837

834-
} else if (isBodyCell && cell.column.sticky) {
838+
} else if ((isBodyCell || isTotalRow) && cell.column.sticky) {
835839
styles = `left:${this.stickyColWitdh[cell.column.id]}px;`;
836840
sticky = true;
837841
}
@@ -845,7 +849,8 @@ export default class CellManager {
845849
isHeader ? `dt-cell--header-${colIndex}` : '',
846850
isFilter ? 'dt-cell--filter' : '',
847851
isBodyCell && (row && row.meta.isTreeNodeClose) ? 'dt-cell--tree-close' : '',
848-
sticky ? 'dt-sticky-col' : ''
852+
sticky ? 'dt-sticky-col' : '',
853+
checkboxserialNoclass,
849854
].join(' ');
850855

851856
return `

‎src/style.css‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,16 @@
2727
.datatable {
2828
position: relative;
2929
overflow: hidden;
30+
.dt-cell--col-0{
31+
border-left: 1px solid var(--dt-border-color);
32+
}
3033
}
3134

32-
.dt-scrollable > .dt-row-0{
33-
border-top: 2px solid var(--dt-border-color);
35+
.dt-header{
36+
border-bottom: 2px solid var(--dt-border-color);
3437
}
3538

3639
.datatable-content{
37-
overflow-x: auto;
3840
.dt-header{
3941
display: flex;
4042
}
@@ -78,7 +80,7 @@
7880
.dt-cell {
7981
border: 1px solid var(--dt-border-color);
8082
border-bottom: none;
81-
border-right: none;
83+
border-left: none;
8284
position: relative;
8385
outline: none;
8486
padding: 0;

‎src/style.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export default class Style {
2323
this.styleEl = styleEl;
2424

2525
this.bindResizeWindow();
26+
this.bindScrollHeader();
2627
}
2728

2829
get stylesheet() {
@@ -38,6 +39,60 @@ export default class Style {
3839
}
3940
}
4041

42+
bindScrollHeader() {
43+
this._settingHeaderPosition = false;
44+
45+
$.on(this.bodyScrollable, 'scroll', (e) => {
46+
47+
if (this._settingHeaderPosition) return;
48+
49+
this._settingHeaderPosition = true;
50+
51+
requestAnimationFrame(() => {
52+
53+
const scrollLeft = e.target.scrollLeft;
54+
55+
// Move non-sticky header and footer cells normally
56+
const nonStickyHeaderCells = this.header.querySelectorAll('.dt-cell:not(.dt-sticky-col)');
57+
const nonStickyFooterCells = this.footer.querySelectorAll('.dt-cell:not(.dt-sticky-col)');
58+
59+
nonStickyHeaderCells.forEach(cell => {
60+
$.style(cell, { transform: `translateX(${-scrollLeft}px)` });
61+
});
62+
63+
nonStickyFooterCells.forEach(cell => {
64+
$.style(cell, { transform: `translateX(${-scrollLeft}px)` });
65+
});
66+
67+
const stickyHeaderCells = this.header.querySelectorAll(
68+
'.dt-cell.dt-sticky-col:not(.dt-cell-serial-no):not(.dt-cell-checkbox)'
69+
);
70+
71+
stickyHeaderCells.forEach((headerCell) => {
72+
73+
const colIndex = headerCell.getAttribute('data-col-index');
74+
const bodyCell = this.bodyScrollable.querySelector(`.dt-cell[data-col-index="${colIndex}"]`);
75+
const colLeft = parseFloat(headerCell.style.left) || 0; // get left position of the column
76+
77+
// Find corresponding footer cell
78+
const footerCell = this.footer.querySelector(`.dt-cell[data-col-index="${colIndex}"]`);
79+
80+
if (~~(bodyCell.offsetLeft - scrollLeft) > colLeft) {
81+
headerCell.style.transform = `translateX(${-scrollLeft - 1}px)`;
82+
if (footerCell) {
83+
footerCell.style.transform = `translateX(${scrollLeft ? -scrollLeft - 1 : 0}px)`;
84+
}
85+
} else {
86+
headerCell.style.transform = `translateX(${colLeft - headerCell.offsetLeft}px)`;
87+
if (footerCell) footerCell.style.transform = `translateX(${colLeft - footerCell.offsetLeft}px)`;
88+
}
89+
});
90+
91+
this._settingHeaderPosition = false;
92+
});
93+
});
94+
}
95+
4196
onWindowResize() {
4297
this.distributeRemainingWidth();
4398
this.refreshColumnWidth();

0 commit comments

Comments
 (0)