Merge pull request #11 from jackkjhsu/master

Some minor fixes
lekoala · Sep 28, 2023 · d986e7e · d986e7e
2 parents 05f2037 + 48ab225
commit d986e7e
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 18 deletions.
diff --git a/dist/data-grid.css b/dist/data-grid.css
diff --git a/dist/data-grid.css.map b/dist/data-grid.css.map
diff --git a/dist/data-grid.js b/dist/data-grid.js
diff --git a/dist/data-grid.js.map b/dist/data-grid.js.map
diff --git a/dist/data-grid.min.css b/dist/data-grid.min.css
diff --git a/dist/data-grid.min.css.map b/dist/data-grid.min.css.map
diff --git a/dist/data-grid.min.js b/dist/data-grid.min.js
diff --git a/dist/data-grid.min.js.map b/dist/data-grid.min.js.map
diff --git a/scss/_core.scss b/scss/_core.scss
@@ -384,6 +384,13 @@ data-grid {
       }
     }
 
+    tr {
+      &.dg-fake-row {
+        height: 4rem;
+        border: none;
+      }
+    }
+
     &.dg-network-error {
       table {
         color: #842029;
@@ -392,17 +399,28 @@ data-grid {
       }
 
       tbody {
-        height: 8rem;
+        height: auto;
 
         &:before {
           font-size: 2rem;
+          top: auto;
+          transform: translate(-50%);
         }
 
         tr:not(.dg-fake-row) {
           display: none;
         }
       }
     }
+
+    &:not(.dg-network-error) {
+      tbody {
+        &:before {
+          top: auto;
+          transform: translate(-50%, 30%);
+        }
+      }
+    }
   }
 
   // Zebra rows

diff --git a/src/data-grid.js b/src/data-grid.js
@@ -934,7 +934,8 @@ class DataGrid extends BaseElement {
    * @returns {Promise}
    */
   loadData() {
-    const flagEmpty = () => !this.data.length && this.classList.add("dg-empty");
+    const flagEmpty = () => !this.data.length && this.classList.add("dg-empty"),
+      tbody = this.querySelector("tbody");
     // We already have some data
     if (this.meta || this.originalData || this.classList.contains("dg-initialized")) {
       // We don't use server side data
@@ -983,13 +984,16 @@ class DataGrid extends BaseElement {
         .catch((err) => {
           this.log(err);
           if (err.message) {
-            this.querySelector("tbody").setAttribute("data-empty", err.message.replace(/^\s+|\r\n|\n|\r$/g, ""));
+            tbody.setAttribute("data-empty", err.message.replace(/^\s+|\r\n|\n|\r$/g, ""));
           }
           this.classList.add("dg-empty", "dg-network-error");
         })
         // @ts-ignore
         .finally(() => {
           flagEmpty();
+          if (!this.classList.contains("dg-network-error") && tbody.getAttribute("data-empty") != this.labels.noData) {
+            tbody.setAttribute("data-empty", this.labels.noData);
+          }
           this.classList.remove("dg-loading");
           this.loading = false;
         })