Almost works.

Author: Templarian

src/pg/table/README.md

@@ -7,7 +7,7 @@ The `pg-table` component allows a standard way to create static tables. While it
 
 ```typescript
 import '@pictogrammers/components/pg/table';
-import PgTable from '@pictogrammers/components/pg/table';
+import PgTable, { createTableItem } from '@pictogrammers/components/pg/table';
 ```
 
 ```html
@@ -46,19 +46,22 @@ this.$table.columns = [{
 ```typescript
 const IconStar = 'M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z';
 const IconStarOutline = 'M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z';
-this.$table.data = [{
-  name: 'Dipper Pines',
-  age: 12,
-  favorite: {
-    type: TableCellButtonIcon,
-    icon: IconStar,
-  }
-}, {
-  name: 'Mabel Pines',
-  age: 12,
-  favorite: {
-    type: TableCellButtonIcon,
-    icon: IconStar,
-  }
-}];
+this.$table.data = [
+  createTableItem({
+    name: 'Dipper Pines',
+    age: 12,
+    favorite: {
+      type: TableCellButtonIcon,
+      icon: IconStar,
+    }
+  }),
+  createTableItem({
+    name: 'Mabel Pines',
+    age: 12,
+    favorite: {
+      type: TableCellButtonIcon,
+      icon: IconStar,
+    }
+  })
+];
 ```

src/pg/table/__examples__/basic/basic.ts

@@ -1,5 +1,5 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
-import PgTable from '../../table';
+import PgTable, { createTableItem } from '../../table';
 
 import template from './basic.html';
 
@@ -10,6 +10,7 @@ import template from './basic.html';
 export default class XPgTableBasic extends HTMLElement {
 
   @Part() $table: PgTable;
+  @Part() $pushData: HTMLButtonElement;
 
   connectedCallback() {
     // this.$table.addEventListener('click', this.handleClick.bind(this));
@@ -26,25 +27,33 @@ export default class XPgTableBasic extends HTMLElement {
     }];
     const IconStar = 'M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z';
     const IconStarOutline = 'M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z';
-    this.$table.data = [{
-      name: 'Dipper Pines',
-      age: 12,
-      // favorite: {
-      //   type: TableCellButtonIcon,
-      //   icon: IconStar,
-      // }
-    }, {
-      name: 'Mabel Pines',
-      age: 12,
-      // favorite: {
-      //   type: TableCellButtonIcon,
-      //   icon: IconStar,
-      // }
-    }];
+    this.$table.data = [
+      createTableItem({
+        name: 'Dipper Pines',
+        age: 12,
+        // favorite: {
+        //   type: TableCellButtonIcon,
+        //   icon: IconStar,
+        // }
+      }),
+      createTableItem({
+        name: 'Mabel Pines',
+        age: 12,
+        // favorite: {
+        //   type: TableCellButtonIcon,
+        //   icon: IconStar,
+        // }
+      })
+    ];
+    this.$pushData.addEventListener('click', this.handlePushData.bind(this));
   }
 
-  handleClick() {
-
+  newCount = 0;
+  handlePushData() {
+    this.$table.data.push({
+      name: `new ${this.newCount++}`,
+      age: this.newCount
+    })
   }
 
 }

src/pg/table/table.ts

@@ -2,10 +2,41 @@ import { Component, Prop, Part, forEach } from '@pictogrammers/element';
 
 import PgTableColumn from '../tableColumn/tableColumn';
 import PgTableRow from '../tableRow/tableRow';
+import PgTableCellText from '../tableCellText/tableCellText';
 
 import template from './table.html';
 import style from './table.css';
 
+/**
+ * Create a table data item that can react to data changes. While cumbersome
+ * this greatly increases performance and uses less memory.
+ *
+ * @param obj ex: { field1: 'value', field2: 42 }
+ * @returns formatted object
+ */
+export function createTableItem(obj: object) {
+  const keys = Object.keys(obj);
+  const items: any[] = [];
+  keys.forEach((key) => {
+    if (typeof obj[key] === 'object' && obj[key] !== null) {
+      if (obj[key].hasOwnProperty('type')) {
+        obj[key].type = PgTableCellText;
+      }
+      items.push({
+        key,
+        ...obj[key]
+      });
+    } else {
+      items.push({
+        key,
+        value: `${obj[key] || ''}`,
+        type: PgTableCellText,
+      });
+    }
+  });
+  return { items };
+}
+
 @Component({
   selector: 'pg-table',
   style,
@@ -18,6 +49,8 @@ export default class PgTable extends HTMLElement {
   @Part() $columns: HTMLDivElement;
   @Part() $rows: HTMLDivElement;
 
+  trackedData = [];
+
   connectedCallback() {
     forEach({
       container: this.$columns,
@@ -27,13 +60,7 @@ export default class PgTable extends HTMLElement {
     forEach({
       container: this.$rows,
       items: this.data,
-      type: () => PgTableRow,
+      type: () => PgTableRow
     });
   }
-
-  render(changes) {
-    if (changes.data) {
-      console.log(this.data);
-    }
-  }
-}
+}

src/pg/tableCellText/README.md

@@ -0,0 +1,3 @@
+# `PgTableCellText`
+
+See `PgTable`.

src/pg/tableCellText/tableCellText.css

@@ -0,0 +1,7 @@
+:host {
+  display: contents;
+}
+
+[part=cells] {
+  display: table-row;
+}

src/pg/tableCellText/tableCellText.html

@@ -0,0 +1 @@
+<div part="label"></div>

src/pg/tableCellText/tableCellText.ts

@@ -0,0 +1,22 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './tableCellText.html';
+import style from './tableCellText.css';
+
+@Component({
+  selector: 'pg-table-cell-text',
+  style,
+  template
+})
+export default class PgTableCellText extends HTMLElement {
+  @Prop() value: string = '';
+  @Prop() key: string = '';
+
+  @Part() $label: HTMLDivElement;
+
+  render(changes) {
+    if (changes.value) {
+      this.$label.textContent = this.value;
+    }
+  }
+}

src/pg/tableRow/README.md

@@ -1,3 +1,3 @@
-# `PgTableColumn`
+# `PgTableRow`
 
-See `PgTableRow`.
+See `PgTable`.

src/pg/tableRow/tableRow.ts

@@ -1,4 +1,6 @@
-import { Component, Prop, Part } from '@pictogrammers/element';
+import { Component, Prop, Part, forEach } from '@pictogrammers/element';
+
+import PgTableCellText from '../tableCellText/tableCellText';
 
 import template from './tableRow.html';
 import style from './tableRow.css';
@@ -9,12 +11,17 @@ import style from './tableRow.css';
   template
 })
 export default class PgTableRow extends HTMLElement {
-  @Prop() label: string = '';
+  @Prop() items: any = [];
   @Prop() key: string = '';
 
   @Part() $cells: HTMLDivElement;
 
   connectedCallback() {
-
+    forEach({
+      container: this.$cells,
+      items: this.items,
+      type: (item) => item.type ? item.type : PgTableCellText,
+    });
+    console.log(this.items);
   }
 }