From 9c2cf888a2fc056a21aba0dbdee9048408ec4f20 Mon Sep 17 00:00:00 2001 From: sokumon Date: Sun, 4 May 2025 19:59:26 +0530 Subject: [PATCH 1/4] fix(UX): better no-message ux --- src/body-renderer.js | 10 +++++++--- src/style.css | 9 +++++++++ src/style.js | 6 ++++++ 3 files changed, 22 insertions(+), 3 deletions(-) diff --git a/src/body-renderer.js b/src/body-renderer.js index 1176e3e..8e6b5a9 100644 --- a/src/body-renderer.js +++ b/src/body-renderer.js @@ -1,5 +1,5 @@ import HyperList from 'hyperlist'; - +import $ from "./dom" export default class BodyRenderer { constructor(instance) { this.instance = instance; @@ -15,9 +15,10 @@ export default class BodyRenderer { renderRows(rows) { this.visibleRows = rows; this.visibleRowIndices = rows.map(row => row.meta.rowIndex); - + this.instance.noData = false if (rows.length === 0) { this.bodyScrollable.innerHTML = this.getNoDataHTML(); + this.instance.noData = true this.footer.innerHTML = ''; return; } @@ -140,7 +141,10 @@ export default class BodyRenderer { } getNoDataHTML() { - return `
${this.options.noDataMessage}
`; + + let width = this.instance.header.scrollWidth; + let height = this.bodyScrollable.clientHeight; + return `
${this.options.noDataMessage}
`; } getToastMessageHTML(message) { diff --git a/src/style.css b/src/style.css index 451a151..673ad6c 100644 --- a/src/style.css +++ b/src/style.css @@ -16,6 +16,7 @@ --dt-selection-highlight-color: var(--dt-light-yellow); --dt-toast-message-border: none; --dt-header-cell-bg: var(--dt-cell-bg); + --dt-no-data-message-width: 90px; } .datatable { @@ -54,7 +55,15 @@ padding: var(--dt-spacer-3); border-left: 1px solid var(--dt-border-color); border-right: 1px solid var(--dt-border-color); + .no-data-message{ + position: absolute; + top: 100px; + left: 50px; + border: none; + width: var(--dt-no-data-message-width); + } } + } .dt-row { diff --git a/src/style.js b/src/style.js index 051b75f..7726128 100644 --- a/src/style.js +++ b/src/style.js @@ -89,6 +89,12 @@ export default class Style { }); this._settingHeaderPosition = false; + if(this.instance.noData){ + $.style($(".no-data-message"),{ + left: `${this.instance.wrapper.clientWidth/2 -left}px` + }) + } + this._settingHeaderPosition = false; }); }); } From 4e10f34f4d84b87c95ffc5f83c6d68a940340e05 Mon Sep 17 00:00:00 2001 From: sokumon Date: Mon, 5 May 2025 01:23:32 +0530 Subject: [PATCH 2/4] fix: variable name --- src/style.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/style.js b/src/style.js index 7726128..56e12b5 100644 --- a/src/style.js +++ b/src/style.js @@ -77,7 +77,7 @@ export default class Style { // Find corresponding footer cell const footerCell = this.footer.querySelector(`.dt-cell[data-col-index="${colIndex}"]`); - if (~~(bodyCell.offsetLeft - scrollLeft) > colLeft) { + if (bodyCell && ~~(bodyCell.offsetLeft - scrollLeft) > colLeft) { headerCell.style.transform = `translateX(${-scrollLeft - 1}px)`; if (footerCell) { footerCell.style.transform = `translateX(${scrollLeft ? -scrollLeft - 1 : 0}px)`; @@ -91,7 +91,7 @@ export default class Style { this._settingHeaderPosition = false; if(this.instance.noData){ $.style($(".no-data-message"),{ - left: `${this.instance.wrapper.clientWidth/2 -left}px` + left: `${this.instance.wrapper.clientWidth/2 -(-scrollLeft)}px` }) } this._settingHeaderPosition = false; From 41e3cba02b7aa3b4ed96dbdaca5a33f7f7a08ad5 Mon Sep 17 00:00:00 2001 From: sokumon Date: Mon, 5 May 2025 01:26:17 +0530 Subject: [PATCH 3/4] chore: run linter --- src/body-renderer.js | 12 +++++++----- src/style.js | 12 ++++++------ 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/body-renderer.js b/src/body-renderer.js index 8e6b5a9..28068df 100644 --- a/src/body-renderer.js +++ b/src/body-renderer.js @@ -1,5 +1,4 @@ import HyperList from 'hyperlist'; -import $ from "./dom" export default class BodyRenderer { constructor(instance) { this.instance = instance; @@ -15,10 +14,10 @@ export default class BodyRenderer { renderRows(rows) { this.visibleRows = rows; this.visibleRowIndices = rows.map(row => row.meta.rowIndex); - this.instance.noData = false + this.instance.noData = false; if (rows.length === 0) { this.bodyScrollable.innerHTML = this.getNoDataHTML(); - this.instance.noData = true + this.instance.noData = true; this.footer.innerHTML = ''; return; } @@ -141,10 +140,13 @@ export default class BodyRenderer { } getNoDataHTML() { - let width = this.instance.header.scrollWidth; let height = this.bodyScrollable.clientHeight; - return `
${this.options.noDataMessage}
`; + return `
+
+ ${this.options.noDataMessage} +
+
`; } getToastMessageHTML(message) { diff --git a/src/style.js b/src/style.js index 56e12b5..0ec37d8 100644 --- a/src/style.js +++ b/src/style.js @@ -89,12 +89,12 @@ export default class Style { }); this._settingHeaderPosition = false; - if(this.instance.noData){ - $.style($(".no-data-message"),{ - left: `${this.instance.wrapper.clientWidth/2 -(-scrollLeft)}px` - }) - } - this._settingHeaderPosition = false; + if (this.instance.noData) { + $.style($('.no-data-message'), { + left: `${this.instance.wrapper.clientWidth / 2 - (-scrollLeft)}px` + }); + } + this._settingHeaderPosition = false; }); }); } From fc94f247924690b313dd2bd7bd866643a43f2719 Mon Sep 17 00:00:00 2001 From: sokumon Date: Mon, 5 May 2025 10:15:33 +0530 Subject: [PATCH 4/4] fix: template formatting --- src/body-renderer.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/body-renderer.js b/src/body-renderer.js index 28068df..7a26486 100644 --- a/src/body-renderer.js +++ b/src/body-renderer.js @@ -140,13 +140,18 @@ export default class BodyRenderer { } getNoDataHTML() { - let width = this.instance.header.scrollWidth; - let height = this.bodyScrollable.clientHeight; - return `
-
- ${this.options.noDataMessage} -
-
`; + const width = this.instance.header.scrollWidth; + const height = this.bodyScrollable.clientHeight; + return ` +
+
+ ${this.options.noDataMessage} +
+
+ `; } getToastMessageHTML(message) {