Merge pull request #210 from sokumon/no-message-ux

fix(ux): better no data experience

Author: sokumon

src/body-renderer.js

@@ -1,5 +1,4 @@
 import HyperList from 'hyperlist';
-
 export default class BodyRenderer {
     constructor(instance) {
         this.instance = instance;
@@ -15,9 +14,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 +140,18 @@ export default class BodyRenderer {
     }
 
     getNoDataHTML() {
-        return `<div class="dt-scrollable__no-data">${this.options.noDataMessage}</div>`;
+        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>
+        `;
     }
 
     getToastMessageHTML(message) {

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 {

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)`;
@@ -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 - (-scrollLeft)}px`
+                    });
+                }
+                this._settingHeaderPosition = false;
             });
         });
     }