Added Error message if no table data

cdoremus · May 28, 2024 · beef84a · beef84a
1 parent 82e779e
commit beef84a
Showing 1 changed file with 23 additions and 10 deletions.
diff --git a/components/wc/TableWC.ts b/components/wc/TableWC.ts
@@ -4,7 +4,7 @@ export type TableDataItem = {
   email: string;
 };
 
-class MYTable extends HTMLElement {
+class MyTable extends HTMLElement {
   css = `
     table {
       border: 4px solid black;
@@ -14,6 +14,10 @@ class MYTable extends HTMLElement {
       border: 3px solid black;
       text-align: center;
     }
+    div {
+      font-size:2rem;
+      font-weight:900;
+    }
   `;
   constructor() {
     super();
@@ -23,19 +27,28 @@ class MYTable extends HTMLElement {
     const json = this.getAttribute("data-feed") ?? "[]";
     const data: [TableDataItem] = JSON.parse(json);
     const shadowRoot = this.attachShadow({ mode: "open" });
-    shadowRoot.innerHTML = `
-    <style>${this.css}</style>
-    <table>
-      <thead><th>ID</th><th>Name</th><th>Email</th></thead>
-      <tbody>
-      ${
+    let html = `<style>${this.css}</style>`;
+    if (data.length > 0) {
+      html = html + this.displayData(data);
+    } else {
+      html = html + `<div>There was a problem fetching the user data</div>`;
+    }
+    shadowRoot.innerHTML = html;
+  }
+
+  displayData(data: [TableDataItem]) {
+    return `
+      <table>
+        <thead><th>ID</th><th>Name</th><th>Email</th></thead>
+        <tbody>
+        ${
       data.map((item) =>
         `<tr><td>${item.id}</td><td>${item.name}</td><td>${item.email}</td></tr>`
       )
     }
-      </tbody>
-    </table>
+        </tbody>
+      </table>
     `;
   }
 }
-customElements.define("data-table", MYTable);
+customElements.define("data-table", MyTable);