Merge pull request #212 from frappe/revert-210-no-message-ux

Revert "fix(ux): better no data experience"

Author: sokumon

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 `
-            <div 
-                class="dt-scrollable__no-data" 
-                style="width: ${width - 2}px; height: ${height}px"
-            >
-                <div class="dt-scrollable__no-data no-data-message">
-                    ${this.options.noDataMessage}
-                </div>
-            </div>
-        `;
+        return `<div class="dt-scrollable__no-data">${this.options.noDataMessage}</div>`;
     }
 
     getToastMessageHTML(message) {

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 {

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;
             });
         });
     }