diff --git a/demo/api.min.js b/demo/api.min.js
index 30dbac9..8db02f5 100644
--- a/demo/api.min.js
+++ b/demo/api.min.js
@@ -51,16 +51,6 @@ class AuroTable extends LitElement {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroTable);
   }
 
-  updated(changedProperties) {
-    if (changedProperties.has('columnHeaders')) {
-      this.extractHeaders();
-    }
-
-    if (changedProperties.has('componentData')) {
-      this.extractRows();
-    }
-  }
-
   firstUpdated() {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-table');
@@ -68,44 +58,24 @@ class AuroTable extends LitElement {
 
   /**
    * @private
+   * @param { Array } columns - Titles for column headers.
+   * @param { Array } data - TD content.
    * @returns { void }
    */
-  extractHeaders() {
-    if (this.columnHeaders) {
-      const headerRow = this.shadowRoot.querySelector('thead tr');
+  extractRows(columns, data) {
+    const rows = [];
 
-      headerRow.innerHTML = '';
+    data.forEach((index) => {
+      const row = [];
 
-      this.columnHeaders.forEach((header) => {
-        const th = document.createElement('th');
-
-        th.innerHTML = header;
-        headerRow.appendChild(th);
+      columns.forEach((column) => {
+        row.push(index[column]);
       });
-    }
-  }
-
-  /**
-   * @private
-   * @returns { void }
-   */
-  extractRows() {
-    const tableBody = this.shadowRoot.querySelector('tbody');
-
-    if (this.componentData && this.columnHeaders) {
-      this.componentData.forEach((row) => {
-        const tr = document.createElement('tr');
 
-        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
@@ -114,13 +84,30 @@ class AuroTable extends LitElement {
       'nowrap': this.nowrap,
     };
 
-    return html`
-      <table>
-        <thead><tr></tr></thead>
-        <tbody class="${classMap(classes)}">
-        </tbody>
-      </table>
-    `;
+    if (this.columnHeaders && this.componentData) {
+      return html`
+        <table>
+          <thead>
+            <tr>
+              ${this.columnHeaders.map((header) => html`
+                <th>${header}</th>
+              `)}
+            </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``;
   }
 }
 
diff --git a/demo/index.min.js b/demo/index.min.js
index be265e8..2bfb8b4 100644
--- a/demo/index.min.js
+++ b/demo/index.min.js
@@ -51,16 +51,6 @@ class AuroTable extends LitElement {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroTable);
   }
 
-  updated(changedProperties) {
-    if (changedProperties.has('columnHeaders')) {
-      this.extractHeaders();
-    }
-
-    if (changedProperties.has('componentData')) {
-      this.extractRows();
-    }
-  }
-
   firstUpdated() {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-table');
@@ -68,44 +58,24 @@ class AuroTable extends LitElement {
 
   /**
    * @private
+   * @param { Array } columns - Titles for column headers.
+   * @param { Array } data - TD content.
    * @returns { void }
    */
-  extractHeaders() {
-    if (this.columnHeaders) {
-      const headerRow = this.shadowRoot.querySelector('thead tr');
+  extractRows(columns, data) {
+    const rows = [];
 
-      headerRow.innerHTML = '';
+    data.forEach((index) => {
+      const row = [];
 
-      this.columnHeaders.forEach((header) => {
-        const th = document.createElement('th');
-
-        th.innerHTML = header;
-        headerRow.appendChild(th);
+      columns.forEach((column) => {
+        row.push(index[column]);
       });
-    }
-  }
-
-  /**
-   * @private
-   * @returns { void }
-   */
-  extractRows() {
-    const tableBody = this.shadowRoot.querySelector('tbody');
-
-    if (this.componentData && this.columnHeaders) {
-      this.componentData.forEach((row) => {
-        const tr = document.createElement('tr');
 
-        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
@@ -114,13 +84,30 @@ class AuroTable extends LitElement {
       'nowrap': this.nowrap,
     };
 
-    return html`
-      <table>
-        <thead><tr></tr></thead>
-        <tbody class="${classMap(classes)}">
-        </tbody>
-      </table>
-    `;
+    if (this.columnHeaders && this.componentData) {
+      return html`
+        <table>
+          <thead>
+            <tr>
+              ${this.columnHeaders.map((header) => html`
+                <th>${header}</th>
+              `)}
+            </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``;
   }
 }
 
diff --git a/src/auro-table.js b/src/auro-table.js
index 003791f..8db0760 100644
--- a/src/auro-table.js
+++ b/src/auro-table.js
@@ -52,16 +52,6 @@ export class AuroTable extends LitElement {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroTable);
   }
 
-  updated(changedProperties) {
-    if (changedProperties.has('columnHeaders')) {
-      this.extractHeaders();
-    }
-
-    if (changedProperties.has('componentData')) {
-      this.extractRows();
-    }
-  }
-
   firstUpdated() {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-table');
@@ -69,44 +59,24 @@ export class AuroTable extends LitElement {
 
   /**
    * @private
+   * @param { Array } columns - Titles for column headers.
+   * @param { Array } data - TD content.
    * @returns { void }
    */
-  extractHeaders() {
-    if (this.columnHeaders) {
-      const headerRow = this.shadowRoot.querySelector('thead tr');
+  extractRows(columns, data) {
+    const rows = [];
 
-      headerRow.innerHTML = '';
+    data.forEach((index) => {
+      const row = [];
 
-      this.columnHeaders.forEach((header) => {
-        const th = document.createElement('th');
-
-        th.innerHTML = header;
-        headerRow.appendChild(th);
+      columns.forEach((column) => {
+        row.push(index[column]);
       });
-    }
-  }
-
-  /**
-   * @private
-   * @returns { void }
-   */
-  extractRows() {
-    const tableBody = this.shadowRoot.querySelector('tbody');
-
-    if (this.componentData && this.columnHeaders) {
-      this.componentData.forEach((row) => {
-        const tr = document.createElement('tr');
 
-        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
@@ -115,12 +85,29 @@ export class AuroTable extends LitElement {
       'nowrap': this.nowrap,
     };
 
-    return html`
-      <table>
-        <thead><tr></tr></thead>
-        <tbody class="${classMap(classes)}">
-        </tbody>
-      </table>
-    `;
+    if (this.columnHeaders && this.componentData) {
+      return html`
+        <table>
+          <thead>
+            <tr>
+              ${this.columnHeaders.map((header) => html`
+                <th>${header}</th>
+              `)}
+            </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``;
   }
 }