Uodated table

Author: djthorpe

src/index.html

@@ -47,14 +47,20 @@
       </wc-nav>
     </wc-sidebar>
     <wc-content>
-      <!-- Table of data -->
-      <wc-table id="table">Table of Fruit</wc-table>
-      <script>
-        document.getElementById('table').data = [
+      <div class="container">
+        <h1>Tables</h1>
+
+        <!-- Table of data -->
+        <wc-table id="table">Table of Fruit</wc-table>
+        <script>
+          document.getElementById('table').data = [
             { fruit: 'apple', color: 'green', weight: '100gr' },
             { fruit: 'banana', color: 'yellow', weight: '140gr' }
           ];
-      </script>
+        </script>
+      </div>
+      <hr>
+      
       <div class="container">
         <h1>Buttons</h1>
 

src/table/TableColumn.js

@@ -0,0 +1,5 @@
+export class TableColumn {
+  constructor(name) {
+    this.name = name;
+  }
+}

src/table/TableElement.js

@@ -1,21 +1,14 @@
 import {
-  LitElement, html,
+  LitElement, html, css, nothing,
 } from 'lit';
 
+import { TableColumn } from './TableColumn';
+
 /**
 * TableElement - A class that can be used to display a table
 *
 * @example
-* <wc-table>
-*  <tr>
-*    <th>Column A</th>
-*    <th>Column B</th>
-*  </tr>
-*  <tr>
-*    <td>Row 1, Column A</td>
-*    <td>Row 1, Column B</td>
-*  </tr>
-* </wc-table>
+* <wc-table data="...">Table Caption</wc-table>
 */
 export class TableElement extends LitElement {
   static get localName() {
@@ -24,28 +17,82 @@ export class TableElement extends LitElement {
 
   static get properties() {
     return {
+      /**
+       * @property {Array} data
+       * @memberof TableElement
+       *
+       * The array of data loaded into the table. Each element may be an array or object.
+       */
       data: { type: Array },
     };
   }
 
-  get tableHeader() {
+  static get styles() {
+    return css`
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        border: 1px solid gray;
+      }
+      table th {
+        background-color: lightgray;
+        border: 1px solid gray;
+        text-align: left;
+      }
+      table td,th {
+        padding: 2px;
+      }
+    `;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get tableColumns() {
+    return [
+      new TableColumn('fruit'),
+      new TableColumn('color'),
+      new TableColumn('weight'),
+    ];
+  }
+
+  renderTableHeader() {
     return html`
       <tr>
-        <th>A</th><th>B</th>
+        ${this.tableColumns.map((column) => html`<th>${column.name}</th>`)}
       </tr>
     `;
   }
 
-  // eslint-disable-next-line class-methods-use-this
+  renderTableCell(column, i, j) {
+    const row = this.data[i];
+    if (Array.isArray(row) && row.length <= j) {
+      return row[j];
+    }
+    if (typeof row === 'object' && column.name in row) {
+      return row[column.name];
+    }
+    return nothing;
+  }
+
+  renderTableRow(i) {
+    return this.tableColumns.map((column, j) => html`<td>${this.renderTableCell(column, i, j)}</td>`);
+  }
+
+  renderTableRows() {
+    return html`
+      ${this.data.map((_, i) => html`<tr>${this.renderTableRow(i)}</tr>`)}
+    `;
+  }
+
   render() {
-    // eslint-disable-next-line no-console
-    console.log('TableElement render', this.data);
+    const tableHeader = this.renderTableHeader();
+    const tableRows = this.renderTableRows();
     return html`
         <table>
           <thead>
-            ${this.tableHeader}
+            ${tableHeader}
           </thead>
           <tbody>
+            ${tableRows}
           </tbody>
         </table>
         <caption><slot></slot></caption>