From c11249e58265ae84ed3b6284756238cd17a2b301 Mon Sep 17 00:00:00 2001
From: Jason Baker <jason@capsule42.com>
Date: Thu, 31 Oct 2024 20:15:42 -0700
Subject: [PATCH] perf: refactor how we render the table rows

---
 demo/api.min.js   | 52 ++++++++++++++++++++---------------------------
 demo/index.min.js | 52 ++++++++++++++++++++---------------------------
 src/auro-table.js | 52 ++++++++++++++++++++---------------------------
 3 files changed, 66 insertions(+), 90 deletions(-)

diff --git a/demo/api.min.js b/demo/api.min.js
index 12c3872..95add6e 100644
--- a/demo/api.min.js
+++ b/demo/api.min.js
@@ -23,7 +23,7 @@ class AuroTable extends LitElement {
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
-  // function to define props used within the scope of thie component
+  // function to define props used within the scope of this component
   static get properties() {
     return {
       columnHeaders:  { type: Array },
@@ -55,6 +55,10 @@ class AuroTable extends LitElement {
     if (changedProperties.has('columnHeaders')) {
       this.extractHeaders();
     }
+
+    if (changedProperties.has('componentData')) {
+      this.extractRows();
+    }
   }
 
   firstUpdated() {
@@ -81,24 +85,23 @@ class AuroTable extends LitElement {
 
   /**
    * @private
-   * @param { Array } columns - Titles for column headers.
-   * @param { Array } data - TD content.
    * @returns { void }
    */
-  extractRows(columns, data) {
-    const rows = [];
+  extractRows() {
+    const tableBody = this.shadowRoot.querySelector('tbody');
 
-    data.forEach((index) => {
-      const row = [];
+    this.componentData.forEach((row) => {
+      const tr = document.createElement('tr');
 
-      columns.forEach((column) => {
-        row.push(index[column]);
+      this.columnHeaders.forEach((column) => {
+        const td = document.createElement('td');
+        const content = row[column] || '';
+        td.innerHTML = content;
+        tr.appendChild(td);
       });
 
-      rows.push(row);
+      tableBody.appendChild(tr);
     });
-
-    return rows;
   }
 
   // function that renders the HTML and CSS into  the scope of the component
@@ -107,24 +110,13 @@ class AuroTable extends LitElement {
       'nowrap': this.nowrap,
     };
 
-    if (this.columnHeaders && this.componentData) {
-      return html`
-        <table>
-          <thead><tr></tr></thead>
-          <tbody class="${classMap(classes)}">
-            ${this.extractRows(this.columnHeaders, this.componentData).map((row) => html`
-              <tr>
-                ${row.map((data) => html`
-                  <td>${data}</td>
-                `)}
-              </tr>
-            `)}
-          </tbody>
-        </table>
-      `;
-    }
-
-    return html``;
+    return html`
+      <table>
+        <thead><tr></tr></thead>
+        <tbody class="${classMap(classes)}">
+        </tbody>
+      </table>
+    `;
   }
 }
 
diff --git a/demo/index.min.js b/demo/index.min.js
index d84ce6c..552b427 100644
--- a/demo/index.min.js
+++ b/demo/index.min.js
@@ -23,7 +23,7 @@ class AuroTable extends LitElement {
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
-  // function to define props used within the scope of thie component
+  // function to define props used within the scope of this component
   static get properties() {
     return {
       columnHeaders:  { type: Array },
@@ -55,6 +55,10 @@ class AuroTable extends LitElement {
     if (changedProperties.has('columnHeaders')) {
       this.extractHeaders();
     }
+
+    if (changedProperties.has('componentData')) {
+      this.extractRows();
+    }
   }
 
   firstUpdated() {
@@ -81,24 +85,23 @@ class AuroTable extends LitElement {
 
   /**
    * @private
-   * @param { Array } columns - Titles for column headers.
-   * @param { Array } data - TD content.
    * @returns { void }
    */
-  extractRows(columns, data) {
-    const rows = [];
+  extractRows() {
+    const tableBody = this.shadowRoot.querySelector('tbody');
 
-    data.forEach((index) => {
-      const row = [];
+    this.componentData.forEach((row) => {
+      const tr = document.createElement('tr');
 
-      columns.forEach((column) => {
-        row.push(index[column]);
+      this.columnHeaders.forEach((column) => {
+        const td = document.createElement('td');
+        const content = row[column] || '';
+        td.innerHTML = content;
+        tr.appendChild(td);
       });
 
-      rows.push(row);
+      tableBody.appendChild(tr);
     });
-
-    return rows;
   }
 
   // function that renders the HTML and CSS into  the scope of the component
@@ -107,24 +110,13 @@ class AuroTable extends LitElement {
       'nowrap': this.nowrap,
     };
 
-    if (this.columnHeaders && this.componentData) {
-      return html`
-        <table>
-          <thead><tr></tr></thead>
-          <tbody class="${classMap(classes)}">
-            ${this.extractRows(this.columnHeaders, this.componentData).map((row) => html`
-              <tr>
-                ${row.map((data) => html`
-                  <td>${data}</td>
-                `)}
-              </tr>
-            `)}
-          </tbody>
-        </table>
-      `;
-    }
-
-    return html``;
+    return html`
+      <table>
+        <thead><tr></tr></thead>
+        <tbody class="${classMap(classes)}">
+        </tbody>
+      </table>
+    `;
   }
 }
 
diff --git a/src/auro-table.js b/src/auro-table.js
index 905e251..8eec034 100644
--- a/src/auro-table.js
+++ b/src/auro-table.js
@@ -24,7 +24,7 @@ export class AuroTable extends LitElement {
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
-  // function to define props used within the scope of thie component
+  // function to define props used within the scope of this component
   static get properties() {
     return {
       columnHeaders:  { type: Array },
@@ -56,6 +56,10 @@ export class AuroTable extends LitElement {
     if (changedProperties.has('columnHeaders')) {
       this.extractHeaders();
     }
+
+    if (changedProperties.has('componentData')) {
+      this.extractRows();
+    }
   }
 
   firstUpdated() {
@@ -82,24 +86,23 @@ export class AuroTable extends LitElement {
 
   /**
    * @private
-   * @param { Array } columns - Titles for column headers.
-   * @param { Array } data - TD content.
    * @returns { void }
    */
-  extractRows(columns, data) {
-    const rows = [];
+  extractRows() {
+    const tableBody = this.shadowRoot.querySelector('tbody');
 
-    data.forEach((index) => {
-      const row = [];
+    this.componentData.forEach((row) => {
+      const tr = document.createElement('tr');
 
-      columns.forEach((column) => {
-        row.push(index[column]);
+      this.columnHeaders.forEach((column) => {
+        const td = document.createElement('td');
+        const content = row[column] || '';
+        td.innerHTML = content;
+        tr.appendChild(td);
       });
 
-      rows.push(row);
+      tableBody.appendChild(tr);
     });
-
-    return rows;
   }
 
   // function that renders the HTML and CSS into  the scope of the component
@@ -108,23 +111,12 @@ export class AuroTable extends LitElement {
       'nowrap': this.nowrap,
     };
 
-    if (this.columnHeaders && this.componentData) {
-      return html`
-        <table>
-          <thead><tr></tr></thead>
-          <tbody class="${classMap(classes)}">
-            ${this.extractRows(this.columnHeaders, this.componentData).map((row) => html`
-              <tr>
-                ${row.map((data) => html`
-                  <td>${data}</td>
-                `)}
-              </tr>
-            `)}
-          </tbody>
-        </table>
-      `;
-    }
-
-    return html``;
+    return html`
+      <table>
+        <thead><tr></tr></thead>
+        <tbody class="${classMap(classes)}">
+        </tbody>
+      </table>
+    `;
   }
 }