diff --git a/src/body-renderer.js b/src/body-renderer.js index 7a26486..1176e3e 100644 --- a/src/body-renderer.js +++ b/src/body-renderer.js @@ -1,4 +1,5 @@ import HyperList from 'hyperlist'; + export default class BodyRenderer { constructor(instance) { this.instance = instance; @@ -14,10 +15,9 @@ 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,18 +140,7 @@ export default class BodyRenderer { } getNoDataHTML() { - const width = this.instance.header.scrollWidth; - const height = this.bodyScrollable.clientHeight; - return ` -
-
- ${this.options.noDataMessage} -
-
- `; + return `
${this.options.noDataMessage}
`; } getToastMessageHTML(message) { diff --git a/src/style.css b/src/style.css index 673ad6c..451a151 100644 --- a/src/style.css +++ b/src/style.css @@ -16,7 +16,6 @@ --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 { @@ -55,15 +54,7 @@ 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 0ec37d8..051b75f 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 && ~~(bodyCell.offsetLeft - scrollLeft) > colLeft) { + if (~~(bodyCell.offsetLeft - scrollLeft) > colLeft) { headerCell.style.transform = `translateX(${-scrollLeft - 1}px)`; if (footerCell) { footerCell.style.transform = `translateX(${scrollLeft ? -scrollLeft - 1 : 0}px)`; @@ -89,12 +89,6 @@ 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; }); }); }